1

我的结构如下：

<div class="panel panel-primary">
     <div class="panel-heading">
          <h3 class="panel-title">Tiger128 (v2)</h3>
     </div>
     <div class="panel-body">
         <input class="form-control" id="tiger128v2" placeholder="String to Hash" type="text">
     </div>
     <div class="panel-footer">
          <a class="btn btn-primary generate-hash" data-hash="tiger128v2">Generate Hash</a>
     </div>
</div>

当用户按下<a>它时，它会运行一个 jQuery 函数（使用$('.generate-hash')选择器），该函数使$.getJSON请求通过data-hashtype. 当它返回 JSON 对象时，我需要它附加一些文本，<div class="panel-body">但是您可以看到它们都没有 ID。

我尝试过的内容大致如下：

$(this).parent().prev('.panel-body').append('Appending some text');
$(this).parent().parent().siblings(".panel-body").append('test');

但我无法让它工作。有什么建议么？

$('.generate-hash').click(function (e) {
                e.preventDefault();
                var hashtype = $(this).data('hash');
                var string = $(this).closest('.panel').find('input').val();
                console.log('Started hash request for ' + hashtype + ' with a value of ' + string);
                $.getJSON('ajax/hash.php', {
                    hashtype: hashtype,
                    string: string
                })
                .success(function(data) {
                    console.log('success function');
                    if(data.type == 'success'){
                        // Here is where i need to select the parents
                        $(this).parent().parent().siblings(".panel-body").append('test');
                        $(this).parent().prev('.body').append('<div class="alert alert-info"><strong>Generated Hash:</strong> <code>' + data.hash + '</code></div>');
                        console.log('success msg found');
                    }else{
                        $(this).parent().prev('.body').append('<div class="alert alert-' + data.type + '">' + data.msg + '</div>');
                        console.log('error msg found');
                    }
                })
                .fail(function() {
                    $(this).parent().prev('.body').append('<div class="alert alert-error"><strong>Error:</strong> We could not generate the hash for some reason. The details are below:</div>');
                    console.log('unable to find hash.php or other error');
                });
            });
4

5 回答 5

3

您可以使用.prev()方法：

$(this).parent().prev('.body').append('Something');

或.closest()方法：

$(this).closest('.box').find('.body').append('Something');

编辑：

您应该缓存this对象，在延迟对象的处理程序的上下文中this不引用单击的元素，也替换.success()为.done()：

$('.generate-hash').click(function (e) {
    // ...
    var $this = $(this);
    $.getJSON('ajax/hash.php', {
        hashtype: hashtype,
        string: string
    })
    .done(function(data) {
        console.log('success function');
        if(data.type == 'success'){
            // Here is where i need to select the parents
            $this.parent().parent().siblings(".panel-body").append('test');
            // ...
    })
    .fail(function() {
        $this.parent()...
    });
});
于 2013-10-08T04:41:26.827 回答
2

使用最近的

Closest() 选择与选择器匹配的第一个元素，从 DOM 树向上，而parent()选择作为 DOM 树中另一个元素的父元素的所有元素。

$(this).closest('.box').find('.body').append('Something');

参考最接近

于 2013-10-08T04:40:34.430 回答
0

试试这样的，试试 prev()

 $(this).parent().prev().append('Something');
于 2013-10-08T04:46:20.967 回答
0

也许纯 javascript 可能会工作

var box = this.parentNode.parentNode,
    body = box.getElementsByClassName('body')[0];

body.innerHTML += 'Something';
于 2013-10-08T04:46:49.677 回答
0

尝试这个，

$(this).parents('.box').find('.body').append('Something');

或者

$(this).closest('.box').find('.body').append('Something');

阅读父母（）和最近（）

于 2013-10-08T04:47:32.823 回答