jquery -使用.closest()

Question

我正在使用jQuery，在这里，我需要使用最近的值来获取所需元素的.text()。

下面是HTML：

<div class="endorse-set">
<div class="endorse">
<span class="keyword" id="keyword-1">web developer</span>
<textarea class="comment" id="comment-1"></textarea>
<input type="button" class="endorse-button" id="endorse-button-1" value="Endorse">
</div>​​​​​​​​​​​​​​​​​​​​​​
<div class="endorse">
<span class="keyword" id="keyword-2">web designer</span>
<textarea class="comment" id="comment-2"></textarea>
<input type="button" class="endorse-button" id="endorse-button-2" value="Endorse">
</div>​​​​​​​​​​​​​​​​​​​​​​
<div class="endorse">
<span class="keyword" id="keyword-3">Entrepreneur</span>
<textarea class="comment" id="comment-3"></textarea>
<input type="button" class="endorse-button" id="endorse-button-3" value="Endorse">
</div>​​​​​​​​​​​​​​​​​​​​​​
</div>

当用户单击.text()时，我需要获得网页设计师或web开发人员或企业家和.comment值。

我试过这样做但失败了：

$(".endorse-button").click(function(){        
        var keyword = $(this).closest('span.keyword').text();
        var comment = $(this).closest('textarea.comment').val();
        alert(keyword);
        alert(comment);
});

我什么都没得到。你能帮我一下吗？

我是jQuery的新手！

谢谢!

Answer 1

closest方法查看祖先元素(例如父元素，以及父元素的父元素等等)。所讨论的元素是兄弟关系，因此可以使用siblings方法：

$(".endorse-button").click(function(){        
    var keyword = $(this).siblings('span.keyword').text();
    var comment = $(this).siblings('textarea.comment').val();
    alert(keyword);
    alert(comment);
});

Answer 2

在这种情况下，我将使用.closest()：

$('.endorse-button').click(function(){
    var endorse = $(this).closest('.endorse'),
        keyword = endorse.find('span.keyword').text(),
        comment = endorse.find('textarea.comment').val();
    alert(keyword);
    alert(comment);
});