.prevUntil not working as expected

Question

what am I doing wrong in this code..

I should get the class name of the previous sibling using this code.. but I am getting undefined..where am I going wrong

<!DOCTYPE html>
<html>
<head>

<meta charset=utf-8 />
<title>JprevUntil</title>


<script  type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script>
$('.clickme').live('click',function(){
    alert($(this).prevUntil('li.lick').className);
});
</script>
</head>
<body>

  <div>
      <p id="hello">Hello World</p>
      <li class="lick">hello i am li</li>
      <a href="#">heello i am a</a>
      <p class="clickme">click</p>
  </div>

</body>
</html>

I think your use case is not detailed enough. All the solutions only work as expected on the example stated above. Imagine there is no preceding sibling but a following sibling, then the solutions would work as well but in the wrong direction. Also when there are more than one preceding siblings the solutions do not return the closest sibling to the clicked element but the **first** sibling in the collection. — mayrs, Jul 06 '12 at 08:42
yeah i do agree with..what i wanted to retrieve was id of the closest li having class lick. — Bhoot, Jul 06 '12 at 21:01

Ram · Accepted Answer · 2012-07-06T08:03:45.693

1

you can use siblings() and attr() method, prevUnti is not what you want:

Get all preceding siblings of each element up to but not including the element matched by the selector, DOM node, or jQuery object.

$('.clickme').live('click',function(){
    alert($(this).siblings('li').attr('class'));
});

className is a javascipt core element property and cannot be used with jQuery objects, if you want to use className you can try this:

$('.clickme').on('click',function() { // you can use on(). live() is deprecated
    alert($(this).siblings('li')[0].className);
});

edited Jul 06 '12 at 08:03

answered Jul 06 '12 at 07:46

Ram

143,282
16
168
197

There might be a little performance downside when selecting all siblings and taking the first result in the set `.siblings('li')[0]` instead of just the previous ones. Btw: this example does filter all `li`'s but not all `li`'s with class `lick`. – mayrs Jul 06 '12 at 08:32

TecHunter · Answer 2 · 2012-07-06T09:17:02.540

1

It's because you get a JQuery wrapped object, try :

$('.clickme').live('click',function(){
    alert($(this).prev('li.lick')[0].className);
});

If you inspect your code for

$(this).prevUntil('li.lick')

You have :

-->$(this).prevUntil('li.lick'): e.fn.e.init[1]
       0: HTMLAnchorElement
       context: HTMLParagraphElement
       length: 1
       prevObject: e.fn.e.init[1]
       selector: ".prevUntil(li.lick)"
       __proto__: Object[0]

Your HTMLAnchorElement is a DOM object, it's here that you can retrieve your className property.

edited Jul 06 '12 at 09:17

answered Jul 06 '12 at 07:48

TecHunter

6,091
2
30
47

$('.clickme').live('click',function(){ alert($(this).prevUntil('li.lick').first().className); }); is not working..alert message still shows "undefined"..thanks anyways – Bhoot Jul 06 '12 at 08:11
.get(0) or [0] then, my point is that you need to extract the DOM element from your jQuery wrap – TecHunter Jul 06 '12 at 09:12
sure i get your point. your answer increased my understanding of jquery..thanks – Bhoot Jul 06 '12 at 21:02

score 1 · Answer 3 · edited May 23 '17 at 10:34

1

Look what the jQuery documentation says about this:

Get all preceding siblings of each element up to but not including the element matched by the selector, DOM node, or jQuery object.

Your element is NOT included thats why you don't get what you want.

You could try the following:

$('.clickme').live('click',function(){
    alert($(this).prevAll('li.lick').get(0).className);
});

UPDATE:

Seems like what you want to achieve (getting the closest preceding sibling) can be done with that code (code taken from here):

$('.clickme').live('click',function(){
    alert($(this).prevAll('li.lick:first').attr('class'));
});

FIDDLE

edited May 23 '17 at 10:34

Community

1
1

answered Jul 06 '12 at 07:51

mayrs

2,299
2
24
35

...thanks its working..I had read and re-read the specification but unfortunately i could not comprehend it properly.. – Bhoot Jul 06 '12 at 08:09
years later, but this made me succeed in what I needed. You made my day, thanks man – Infiltrator Aug 31 '18 at 09:01

score 1 · Answer 4 · answered Jul 06 '12 at 07:53

From the prevUntil api documentation

*Get all preceding siblings of each element up to but not including the element matched by the selector, DOM node, or jQuery object.*

You are expecting the prevUntil to stop at the li.lick but it is not included.

You can see live in this jsfiddle

score 1 · Answer 5 · answered Jul 06 '12 at 08:00

1

Do this way:-

Refer LIVE DEMO

HTML:

  <div>
      <li class="lick2">hello i am li 2</li>
      <p id="hello">Hello World</p>
      <li class="lick">hello i am li</li>
      <a href="#">heello i am a</a>
      <p class="clickme">click</p>
      <li class="lick1">hello i am li 2</li>
  </div>

JS:

$('.clickme').one('click',function(){
    alert($(this).prevAll('li').attr('class'));
});

OUTPUT:

lick

answered Jul 06 '12 at 08:00

Siva Charan

17,940
9
60
95

It works @Siva Charan only for first time when i click..thnaks anyways – Bhoot Jul 06 '12 at 08:07

.prevUntil not working as expected

5 Answers5

HTML:

JS:

OUTPUT: