jQuery nextUntil strangeness

Am I missing something or is this method fubar? I couldn't get a script to select properly, so I stri开发者_如何学Pythonpped everything out except jQuery 1.5 and tried this as a test:

HTML:

  <a href="test.php" id="test" class="notActive">test active</a>
  <p><a href="ui.php#content" class="ajax" data-target="loadid">Link 1</a></p>
  <p><a href="widgets.html" class="ajax" data-target="loadid">Link 2</a></p>
  <div id="loadid" class="right bgGreen pad">test;</div>

jQuery:

var z = $('#test').nextUntil('div');

z.css({'background-color' : '#000000' });

console.log(z.html());

Returns:

<a href="test.php" id="test" class="notActive">test active</a>
<p style="background-color: #000000">
<a href="ui.php#content" class="ajax" data-target="loadid">
</p>
<p style="background-color: #000000">
<a href="widgets.html" class="ajax" data-target="loadid">
</p>
<div id="loadid" class="right bgGreen pad">


LOG: <\a href="ui.php#content" class="ajax" data-target="loadid">Link 1</a>

Also, changing the selector from 'div' to 'p' results null... any ideas?

You're missing something. From the jQuery API docs:

Given a jQuery object that represents a set of DOM elements, the .nextUntil()method allows us to search through the successors of these elements in the DOM tree, stopping when it reaches an element matched by the method's argument. The new jQuery object that is returned contains all following siblings up to but not including the one matched by the .nextUntil() selector.

The value returned by your nextUntil() contains multiple elements, namely the two <p>s . Logging the value returned by .html()is misleading because .html() returns only the inner HTML of the first object in the set. Just log the jQuery object itself and you should be able to see what's inside it (at least in Firebug; I don't think WebKit's debugger logs jQuery objects as nicely):

console.log(z);

Which element are you trying to select?

Well this seems right. According to http://api.jquery.com/nextUntil/ the .nextUntil selects all the siblings until but not including the element selected by the argument. So if you do .nextUntil('div') you select all the paragraphs (which are siblings to your #test element). If you do .nextUntil('p') nothing gets selected, because a paragraph apprears right after the #test.

Your .css syntax is wrong I think.

Should have a "," instead of ":"

z.css('background-color', '#000000' );