jQuery Minute™

…a jQuery Minute™ later and you're done!



Finding Immediately Adjacent Siblings

with 2 comments

Greetings! Here’s a quick tip for advanced filtering of adjacent sibling nodes.

Given the following HTML:

1
2
3
4
5
6
7
8

<ul>
    <li>Item 1</li>
    <li class=”hello”>Item 2</li>
    <li class=”hello” id=”three”>Item 3</li>
    <li class=”hello”>Item 4</li>
    <li>Item 5</li>
    <li class=”hello”>Item 6</li>
</ul>

If you needed to select the immediate siblings of #three that matched the class .hello (so the resulting element set would be Item 2, Item 3, Item 4) there isn’t an easy way to do this. jQuery provides a prev() and prevAll() methods (as well as their next() counter parts) but that would return all of the elements. Here’s a jQuery immediateSiblings function to take care of this for us:

$(‘#three’).immediateSiblings(‘li.hello’)

Here’s the code for the plugin:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

/*
 * immediateSiblings 1.1.0 (2009-10-19)
 *
 * Copyright (c) 2006-2009 Jonathan Sharp (http://jdsharp.com)
 * Dual licensed under the MIT (MIT-LICENSE.txt)
 * and GPL (GPL-LICENSE.txt) licenses.
 *
 * http://jdsharp.com/
 *
 * Built upon jQuery 1.3.2 (http://jquery.com)
 */
$.fn.immediateSiblings = function(selector) {
    var siblings = [];
    this.each(function() {
        var children = $(this).parent().children(selector).not(this).get();
        $.merge(siblings, children);
    });
    return this.pushStack( $.unique( siblings ) );
};

Cheers,
-Jonathan

Written by jdsharp

July 14th, 2008 at 8:34 pm

Posted in Code-bits,jQuery 101,Plugin-Extension

«
»

2 Responses to 'Finding Immediately Adjacent Siblings'

Subscribe to comments with RSS or TrackBack to 'Finding Immediately Adjacent Siblings'.

  1. Is this a working sample?

    robert

    12 Oct 09 at 1:07 am

  2. Hi Robert,

    Please see the updated plugin which now correctly handles the siblings and filtering.

    Cheers,
    - Jonathan

    jdsharp

    19 Oct 09 at 12:09 am

Leave a Reply