How to select children elements but only one level

Question

Here is my html code.

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

I have two parent divs that contains data-value "1" and "2".

first:

I want children of div that contains data-value="1". The output should be 4 children 2 div, 1 button, 1 input

second:

I want children of div that contains data-value="2". The output should be 3 children 2 div, 1 button

How is it possible using jQuery's.

Have a look at [Selecting element by data attribute](http://stackoverflow.com/q/2487747/218196) and [How to fetch only topest level div with jQuery?](http://stackoverflow.com/q/1345401/218196) and combine those two. — Felix Kling, Apr 22 '13 at 15:29

score 3 · Answer 1 · answered Apr 22 '13 at 15:28

3

Direct Descendant Selector

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

Or children method:

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

Repeat as needed.

answered Apr 22 '13 at 15:28

nbrooks

18,126
5
54
66

var children = $("div[data-value='1']").children(); alert(children.length); It returns 1 -- it should b 4 alert($(children[0]).attr('data-items')); It returns bind – Asim Ansari Apr 23 '13 at 07:04
This code works. Your HTML is broken, hence the error you're noticing. `
` is not a self-closing tag. Fix your HTML so that your tags are properly closed, and use the code in my answer as-is.
– nbrooks Apr 23 '13 at 20:48

score 0 · Answer 2 · edited Jan 29 '14 at 22:56

0

You can get the child element with .children()

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

Source(s)

jQuery API - .children()

edited Jan 29 '14 at 22:56

animuson

53,861
28
137
147

answered Apr 22 '13 at 15:28

Bill

3,478
23
42

Adil Shaikh · Accepted Answer · 2013-04-22T15:33:15.657

0

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

jsFiddle Demo

edited Apr 22 '13 at 15:33

answered Apr 22 '13 at 15:28

Adil Shaikh

44,509
17
89
111

Thanks alot. [jsFiddle Demo](http://jsfiddle.net/mohammadAdil/FTawW/1/) is working. – Asim Ansari Apr 23 '13 at 15:42

score 0 · Answer 4 · answered Apr 22 '13 at 15:28

Use the jQuery .children() function, combined with an attribute equals selector:

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

How to select children elements but only one level

4 Answers4