Question

我正在尝试获取当前的前一个跨度，我的代码不起作用。

<span class="badge votes">0</span>
<a href="#" id="up-vote"><span data-vote="up" data-count="0" class="glyphicon glyphicon-thumbs-up"></span></a>
<a href="#" id="down-vote"><span data-vote="down" data-count="0" class="glyphicon glyphicon-thumbs-down"></span></a>

当我点击span class="glyphicon glyphicon-thumbs-up"和class="glyphicon glyphicon-thumbs-down"以获取class="badge votes"

中的值时，我想要的是

这是我的jQuery代码

  alert($(this).parent().find('span').text());

或 alert($(this).prevAll('.votes:first').text());

Answer 1

＆＃13;

$('.glyphicon').click(function(evt) {
  alert($(this).parent().prevAll('.badge.votes').text());
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="badge votes">0</span>
<a href="#" id="up-vote"><span data-vote="up" data-count="0" class="glyphicon glyphicon-thumbs-up">Up</span></a>
<a href="#" id="down-vote"><span data-vote="down" data-count="0" class="glyphicon glyphicon-thumbs-down">Down</span></a>

＆＃13;

您的parent().find('span')将升至<a>，然后寻找其子女的跨度。 prevAll('.votes:first')寻找当前跨度的姐妹（没有姐妹）。在这两种情况下，你都被卡在了你想要的位置以下一层。

Answer 2

您可以使用jquery的“最近”功能来获取您正在寻找的范围：

$('span').on('click', function (ev) {
    alert($(ev.currentTarget).closest('.badge.votes').html());
});

小提琴：https://jsfiddle.net/8xj3mt7k/

Answer 3

你可以这样做：

$(this).parent().siblings('.badge.votes');

它会选择<a>的兄弟badge votes。

span选择器也可以正常工作。

Answer 4

这是一个肮脏的小技巧：

$( "#up-vote, #down-vote" ).on( "click", (function( votesSpan ) {
    return function() {
        alert( votesSpan.text() )
    }
}( $("span.badge.votes") )) )

小提琴：http://jsfiddle.net/z4sbhmn9/

这可以进一步采用并变成实用方法。

Answer 5

其中有些答案是完全错误的，但都太复杂了。

.closest('classname')将返回自身，所以这是错误的。

.parent()将返回PARENT类，所以这是错误的。

您要查找的代码是$(this).prevAll('span:first').text()

或对于此特定示例，$(this).prev().prev().text();

我测试了这两个，它们都起作用。通常，以这种方式思考-您正在浏览HTML元素。在浏览器控制台中查看节点，您将看到页面层次结构。 .next()和.prev()返回下一个同级。 .find()搜索孩子。

jQuery得到上一个范围

5 个答案: