Question

我有这个结构：

<div class="list">
    <ul>
        <li>
            <span class="number">1</span>
            <p class="list-title"><a href="#">Welcome</a></p>
            <img src="images/like.png" class="like" />

            <div class="subcomments">
                <div class="comments">
                <ul>
                    <li>
                        <span class="number">2</span>
                        <img src="images/like.png" class="like" />
                    </li>
                </ul>
            </div>
        </div>
    </li>
</ul>

我希望当点击类“like”时出现span.number的内容，即转到父亲并获取带有班级编号的跨度内容。

我正在尝试这个：

$('.like').parent().children('span:first').text()

但是在这两种情况下总是给我一个，而不是在第一个中给出1，而在第二个中给出2个。

Answer 1

您需要jquery siblings()，

<强> Live Demo

$('.like').siblings('span:first').text();

Answer 2

你应该使用this

$(.link).click(function() {
   $(this).parent().find('.number').text();
   //  $(this).parent().find('span:first').text(); // same thing
   //  $(this).closest('.number').text();          // same thing
})

当你写$('.link').parent().find('span:first').text()时; 它始终需要第一个.link课程并获取其跨度值，当您使用this时，它会使用您点击的.link

Answer 3

使用.siblings()：

$('.like').siblings('span:first').text();

这本身将始终显示1 - 因为选择器.like返回2个元素 - 以下代码（.siblings('span:first').text();）同时针对第一个元素运行 - 您需要使用每个元素循环每个值：

$('.like').each(function() {
    alert($(this).siblings('span:first').text());
})

Example here

获取父和第一个跨子jQuery

3 个答案: