Question

这是我的HTML：

<div class="content content-1">
    <div class="row"></div>
    <a href="javascript:void(0)" class="new-content">new content </a>
</div>
<div class="content content-2">
    <div class="row"></div>
    <a href="javascript:void(0)" class="new-content">new content </a>
</div>
<div class="content content-3">
    <div class="row"></div>
    <a href="javascript:void(0)" class="new-content">new content </a>
</div>

如何获取clicked类的元素而不是单击该类的每个元素？

这是我的jquery：

$('.new-content').click(function() {
    $(this).closest('.content').find('.row').show(); 
}

然而，这会选择所有.row而不是所点击的类的最近一行

=======================更新（对不起，我错误地过度简化了）===========

<div class="content content-1">
    <div class="row">
        <h4> 
            <a href="javascript:void(0)" class="new-content">new content</a>             
        <h4>
    </div>
    <div class="new-answer">
    </div>
</div>
<div class="content content-2">
    <div class="row">
        <h4> 
            <a href="javascript:void(0)" class="new-content">new content</a>             
        <h4>
    </div>
    <div class="new-answer">
    </div>
</div>
<div class="content content-3">
    <div class="row">
        <h4> 
            <a href="javascript:void(0)" class="new-content">new content</a>             
        <h4>
    </div>
    <div class="new-answer">
    </div>
</div>

我只想选择点击的.new-answer

中的一个.new-content

Answer 1

假设您将始终具有相同的html结构：

$('.new-content').click(function() {
    $(this).parents('.row').next().show(); 
}

演示：https://jsfiddle.net/erkaner/oLmvcuwk/

Answer 2

试试这个

$('.new-content').click(function() {
    $(this).parents('.content').find('.new-answer').show();
});

Answer 3

您刚刚错过了jquery选择器中的.（点）（closest和find），否则您的其余代码将为您提供所需的结果。如果没有.（点），则选择器将查找content和row标记元素，而不是元素的类。

看到这个

$('.new-content').click(function() {
    $(this).closest('.content').find('.row').show(); 
                     ^-------- dot ---^
}

编辑 - 在OP更新问题后回答，请参阅以下代码，您可以使用closest()获取父row div，然后使用next()获得新内容。

$('.new-content').click(function() {
    $(this).closest('.row').next('.new-answer').show(); 
}

OR

$('.new-content').click(function() {
        $(this).closest('.content').find('.new-answer').show(); 
   }

Answer 4

如果您在div之前只有一个.new-content，并且div属于.row类，那么代码下面也可以完成这项工作!!

$('.new-content').click(function() {
    $(this).prev('.row').show(); 
}

Answer 5

如果可能，请在这种情况下使用event delegation以获得更好的DOM事件绑定和呈现性能。我在here做了一个例子。希望这有帮助。

$('.content a', $('#content-container')).on('click', function(e) { e.preventDefault(); $(e.target).prev('.row').show(); });

Answer 6

您已从目标内容遍历到下一个div。使用代码段。

    $('.new-content').click(function() {
   $(this).closest('div').next('div').show()
}

最接近的方法从目标元素中选择最接近的元素，而下一个方法是从目标元素中选择元素

jQuery获取clicked类的元素，而不是单击该类的每个元素

6 个答案: