jQuery get the previous span

jquery prev
jquery find previous element with class
jquery next previous div example
jquery get previous li
jquery closest
jquery prevall
jquery before
jquery closest sibling

I'm trying to get the previous span before the current, my code doesn't work.

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

What I want is when i click the span with class="glyphicon glyphicon-thumbs-up" and class="glyphicon glyphicon-thumbs-down" to get the value in span with class="badge votes"

here's my jQuery code

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

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

$('.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>

How do I access a SPAN element using the PREV function in JQuery?, $(this).parent().find('span[id*=CommentText]');. A side note: Just looking at your markup, it may be easier to use CSS classes as opposed to ids  Description: Get the immediately preceding sibling of each element in the set of matched elements. If a selector is provided, it retrieves the previous sibling only if it matches that selector. version added: 1.0.prev( [selector ] )

You could use jquery's "closest" function to grab the span you are looking for like so:

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

fiddle: https://jsfiddle.net/8xj3mt7k/

.prev(), Description: Get the immediately preceding sibling of each element in the set of Given a jQuery object that represents a set of DOM elements, the .prev() method float: left;. border: 2px blue solid;. padding: 2px;. } span {. font-size: 14px;. } p {. jQuery parent () Method The parent () method returns the direct parent element of the selected element. This method only traverse a single level up the DOM tree. The following example returns the direct parent element of each <span> elements:

You could do it like this:

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

It will select the sibling of <a> with badge votes.

span selector can also work.

jQuery, The prev() is an inbuilt function in jQuery which is used to return the previous sibling element of the selected element. Siblings are Here selector is the selected element whose previous siblings get returned. span >First span box </ span >. But I'm only get the first data-name span atributes, like this. ItemId = 5 ItemDescription = Product 1 ItemAmount 225,99 ItemQuantity = 1 How To get all attribute-name inside this spans? Thanks for all replyes.

Here's a dirty little trick:

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

Fiddle: http://jsfiddle.net/z4sbhmn9/

This can be taken even further and turn into a utility method.

jQuery prev() Method, The prev() method returns the previous sibling element of the selected element. Sibling elements are elements that share the same parent. The DOM tree: This  To retrieve text of an auto generated span value just do this : var al = $("#id-span-name").text(); alert(al);

Some of these answers are flat out wrong, but all are too complicated.

.closest('classname') will return itself, so this is wrong.

.parent() will return the PARENT class, so this is wrong.

The code you're looking for is $(this).prevAll('span:first').text()

or for this specific example, $(this).prev().prev().text();

I tested both of these, and they work. Just in general, think of it this way - you're navigating through HTML elements. Look in your browser console at the nodes and you'll see the page hierarchy. .next() and .prev() return the next sibling. .find() searches through children.

jQuery closest() Method, Return the first ancestor of <span>, that is an <ul> element: all the way up to the document's root element (<html>), to find the first ancestor of DOM elements. Return the first ancestor of <span>, that is a <span> element Because this method begins with the current element, a search for the first <span> of <span>, will return <span>. Pass in a DOM element as the context within which to search for the first ancestor element

jQuery - prev( [selector] ) Method, jQuery - prev( [selector] ) Method - The prev( [selector] ) method gets the <body​> <div><span>Hello</span></div> <p class = "hilight">Hello Again</p> <p>And  Definition and Usage The prev () method returns the previous sibling element of the selected element. Sibling elements are elements that share the same parent. The DOM tree: This method traverse backwards along the previous sibling of DOM elements.

Next Siblings Selector ("prev ~ Siblings") - jQuery, Example: Finds all divs that are siblings after the element with #prev as its id. Notice the span isn't selected since it is not  Description: Selects all elements that are the last child of their parent. version added: 1.1.4 jQuery( ":last-child" )

jQuery: Set a value in a span using jQuery, jQuery Practical Exercises with Solution: Set a value in a span using jQuery. Previous: Set value in input text using jQuery. Next: Find the class of the clicked element. What is the difficulty level of this exercise? Easy Medium jQuery prev(), prevAll() & prevUntil() Methods. The prev(), prevAll() and prevUntil() methods work just like the methods above but with reverse functionality: they return previous sibling elements (traverse backwards along sibling elements in the DOM tree, instead of forward).

Comments
  • Are those elements wrapped in a parent element? Are there multiple such blocks?
  • No, they couldn't, because .badge.votes is not an ancestor of the click target. Did you test it? (I did; it returns undefined.)
  • Does it? You clicked the zero-width spans, did you, and got an alert that says 0? Magic.
  • .closest() traverse the DOM tree upwards through its ancestors, starting with the selected element. Which is why if you click on 0 ('span.badge.vote') will get you a value of 0. Because the closest element is itself.
  • Well, you are assuming that there aren't any more span.badge.votes
  • Not if each up/down span has their own badge (like on Reddit).
  • I seriously doubt he has more than one of each anchor tags with "vote-up" / "vote-down" ids on the page.