Question

以下是我正在处理的代码，我的目标是，每当用户点击带有“click_me”类的链接时，我想提醒其父母的兄弟姐妹的内容，即“Hello Friends”或“How你呢？“。

我尝试过以下代码，但是没有用。

 $('.click_me').click(function(event){
                    alert($(this).parent('div').closest('p').html());
                });



<li>
    <div>
        <a href="#" class="click_me">Click Me</a>
    </div>
    <p>Hello Friends!</p>
</li>


<li>
    <div>
        <a href="#" class="click_me">Click Me</a>
    </div>
    <p>How are you?!</p>
</li>

Answer 1

.closest()将仅查找祖先元素，在您的情况下，p元素不是祖先元素，它是兄弟元素

您需要使用siblings()

alert($(this).parent('div').siblings('p').html());

演示：Fiddle

或者在这种情况下，它是下一个使用.next()

的元素

alert($(this).parent('div').next('p').html());

演示：Fiddle

Answer 2

您可以使用 next 来选择其父级的下一个元素。选择器的问题在于，您正在使用closest向上查看，该alert($(this).closest('div').next().html());会测试自身以及DOM树。

{{1}}

<强> Fiddle

选择Parent的兄弟姐妹的内容

2 个答案: