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;
    }

Answer 2

你可以这样做：

//Select first level divs, no matter what is the type of root
divsFirstLevel = $('*').children('div.bord');
$(divsFirstLevel).css('border', '1px solid blue');
//Select first child divs
var firstChild = $(divsFirstLevel).children('div.bord').css('border', '1px solid red');
//Select secondchild divs
var secondChild = $(firstChild).children('div.bord').css('border', '1px solid yellow');

在这里小提琴; http://jsfiddle.net/ULekd/3/

编辑 - 我修改了我的答案，以便它只是选择器：

Answer 3

你必须给他们一个不同的班级名称。它在逻辑上不可能选择具有相同名称和元素类型的parent-child-subchild。

所以我希望您必须指定不同的名称。

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

所以要选择Parent，你可以这样做。

$('div.parent-bord').each(...);

OR

$('div.parent-bord#1'); //--> First parent.

在你得到父母后，你可以用同样的方式得到他们的孩子

$('div.parent-bord#1').children('div.child-bord'); // It will select the child div.

Answer 4

您可以获取第一个.bord元素具有的父元素的数量，然后过滤其他.bord元素，仅保留具有相同父元素数的元素。

var bord = $(".bord");
var parentsLength = bord.first().parents().length;
var firstLevelBord = bord.filter(function () {
    return $(this).parents().length === parentsLength;
});
// firstLevelBord contains all the first level .bord elements

然后你可以使用.children过滤第二级.bord元素，第三级等等。

var secondLevelBord = firstLevelBord.children(".bord");
var thirdLevelBord = secondLevelBord.children(".bord");

示例：http://jsfiddle.net/silviubogan/W8NYn/23/

这可以很容易地作为jQuery插件实现。

仅选择第一级嵌套元素

4 个答案: