如何选择子元素但只能选择一个级别

Question

这是我的html代码。

<div data-value="1">

    <div data-items="bind">
        <div data-item="Black" />
        <div data-item="Orange" />
    </div>

    <div data-types="bind">
        <div data-type="Books" />
        <div data-type="Mobiles" />
    </div>

    <button>button 1</button>
    <input type='text'/>

</div>

<div data-value="2">

    <div data-items="bind">
        <div data-item="Black" />
        <div data-item="Orange" />
    </div>

    <div data-types="bind">
        <div data-type="Gifts" />
        <div data-type="Cards" />
    </div>

    <button>button 1</button>

</div>

我有两个父div，分别包含数据值“ 1”和“ 2”。

第一：

我希望div的子级包含data-value =“ 1” 。 输出应为4个孩子2 div，1个按钮，1个输入

第二：

我希望div的子级包含data-value =“ 2” 。 输出应该是3个孩子2 div，1个按钮

怎么可能使用jQuery。

Answer 1

直接后代选择器

$("div[data-value='1'] > *");

或children方法：

$("div[data-value='1']").children();

根据需要重复。

Answer 2

您可以使用.children()获得child元素。

$('div[data-value="1"]').children();

来源

jQuery API-.children（）

Answer 3

$("div[data-value='1']").children();

jsFiddle演示

Answer 4

使用jQuery .children()函数，并结合一个等于equals选择器的属性 ：

var $children1 = $('[data-value="1"]').children(); // children of element with data-value equal to 1

var $children2 = $('[data-value="2"]').children(); // children of element with data-value equal to 2