jquery - 仅选择第一层嵌套元素

Question

我们有以下 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>

需要具有通过调用进行选择的功能

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

仅在示例中标记为 id="1"和 id="2"的元素；如果之后:

b=a.new_function();

它应该只选择child1s

b.new_function(); 

应该能够选择 subchild1s

我尝试了多种方法，现在没有任何想法。

Answer 1

解决了我自己: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;
    }