CODEWITHSUNDEEP
javascriptjqueryhtml
tony pro
tony pro

Reputation: 435

How to get the id of each first element of a nexted div in JQuery

here is my HTML code 

<div id="parent">
    <div id="computer">
        <div id="items">
            <div id="1">hp</div>
            <div id="2">compaq</div>
            <div id="3">toshiba</div>
        </div>
    </div>
    <div id="laptop">
        <div id="1">i5</div>
        <div id="2">dual core</div>
        <div id="3">i3</div>
    </div>
    <div id="printer">
        <div id="laser">hp laser</div>
    </div>
    <div id="cpu">
        <div id="item">
            <div id="1">pintuim</div>
            <div id="2">celeron</div>
        </div>
    </div>
    <div id="scanner">
    <div id="canon">
            <div>canon</div>
        </div>
    </div>
</div>`

I am trying to get the id of each first element of the parent div that is to get an array=[computer, laptop, printer, cpu, scanner]

here is my jquery code but it's taking everything.

var a = $("div.content :nth-child(1)")find("*").toArray();

please I need some help thanks

Upvotes: 1

Views: 54

Answers (2)

Amin Jafari
Amin Jafari

Reputation: 7207

there is a selector in jQuery which will return the first level of children: DEMO

var a=[];
$("#parent > div").each(function(){ // using > will return the first level of children
    a.push($(this).attr('id'));
});
alert(a);

Upvotes: 1

Arun P Johny
Arun P Johny

Reputation: 388316

Those are children of the #parent element so you can iterate over that and create an array out of it using .map()

var array = $('#parent').children().map(function() {
  return this.id;
}).get();

snippet.log(array)
<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>



<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="parent">
  <div id="computer">
    <div id="items">
      <div id="1">hp</div>
      <div id="2">compaq</div>
      <div id="3">toshiba</div>
    </div>
  </div>
  <div id="laptop">
    <div id="1">i5</div>
    <div id="2">dual core</div>
    <div id="3">i3</div>
  </div>
  <div id="printer">
    <div id="laser">hp laser</div>
  </div>
  <div id="cpu">
    <div id="item">
      <div id="1">pintuim</div>
      <div id="2">celeron</div>
    </div>
  </div>
  <div id="scanner">
    <div id="canon">
      <div>canon</div>
    </div>
  </div>
</div>

Upvotes: 1

Related Questions