jQuery获得上一个跨度

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

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

 <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> 

您的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');

它将使用badge votes选择<a>的同级。

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()搜索子级。