Question

We have the following html:

<div>
<div class="bord" id="1">
    parent1
    <div class="bord">
        child1
        <div class="bord">
            subchild1
        </div>
    </div>
</div>
</div>
-----------
<span>
<div class="bord" id="2">
    parent1
    <div class="bord">
        child1
        <div class="bord">
            subchild1
        </div>
    </div>
</div>
</span>

need to have function that will select with call

a=$('.bord').new_function();

only elements marked in sample as id=”1″ and id=”2″;
if after that:

b=a.new_function();

it should select child1s only

b.new_function(); 

should be able to select subchild1s

I tried several ways and have no ideas now.

Answer 1

Solved myself: http://jsfiddle.net/oceog/3pGXv/

HTML:

<div>
    <div class="bord">
        parent1
        <div class="b2">
            b2
        <div class="bord">
            child1
            <div class="bord">
                subchild1
            </div>
        </div>
        </div>
    </div>
</div>

-----------
<div>
<div class="b2">
    b2
    <div class="bord">
        parent1
        <div class="bord">
            child1
            <div class="b2">
                b2
                <div class="bord">
                     subchild1
                </div>
            </div>
        </div>
    </div>
</div>
</div>
​

JS:

jQuery.fn.firstlevel = function(sel) {
    var obj = $(this);
    if (obj.selector != sel) {
        obj = obj.find(sel);
    }
    obj = obj.not(obj.find(sel));
    console.log(obj);
    return obj;
}
$('.bord')
    .firstlevel('.bord').css('border', '3px solid red')
    .firstlevel('.bord').css('border', '3px solid green')
    .firstlevel('.bord').css('border', '3px solid blue');
$('.b2')
    .firstlevel('.b2').css('border', '1px solid red')
    .firstlevel('.b2').css('border', '1px solid green')
    .firstlevel('.b2').css('border', '1px solid blue');
​
css:

    .bord
    {
        border: 1px solid black;
        margin: 10px;
    }