How do you query for child elements while iterating through elements in jquery?

Question

I'm able to get the parent element but I unable to successfully get the child elements and their attributes. I'd like to be able to extract the id in the input element below and put it in the array called links.

I tried this

var links = [];

$(".sportmenu li").each(function(i, item) {
  links.push(
    $(item).children("input")[0].id
  );
});
console.log(links);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="sportmenu ui-listview">
  <li class="table">
    <span class="fav-box table-cell">
          <input type="checkbox" id="TOP_SPORT-246712-Serie B" class="star" readonly="" value="on">
          <label></label>
        </span>
    <div class="competition-info">
      <span class="table-cell">
            <a href="javascript:;" class="ui-link">
              <span class="league">Serie B</span>
      </a>
      </span>
      <span class="val-box table-cell">
            <span class="val">2</span>
      </span>
    </div>
  </li>
</ul>

the input is not a direct child of the li which is why your query is not working — Pete, Jun 06 '18 at 12:31

score 1 · Accepted Answer · answered Jun 06 '18 at 12:28

You can use find and attr:

var links = [];

$(".sportmenu li").each(function(i, item) {
 links.push(
   $(item).find("input").attr('id')
  );
});

console.log(links)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="sportmenu ui-listview">
  <li class="table">
    <span class="fav-box table-cell">
      <input type="checkbox" id="TOP_SPORT-246712-Serie B" class="star" readonly="" value="on">
      <label></label>
    </span>
    <div class="competition-info">
      <span class="table-cell">
        <a href="javascript:;" class="ui-link">
          <span class="league">Serie B</span>
        </a>
      </span>
      <span class="val-box table-cell">
        <span class="val">2</span>
      </span>
    </div>
  </li>
</ul>

Takit Isy · Answer 2 · 2018-06-06T12:36:34.787

In your code, just change .children() to .find():

var links = [];

$(".sportmenu li").each(function(i, item) {
  links.push(
    $(item).find("input")[0].id
  );
});

console.log(links);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="sportmenu ui-listview">
  <li class="table">
    <span class="fav-box table-cell">
      <input type="checkbox" id="TOP_SPORT-246712-Serie B" class="star" readonly="" value="on">
      <label></label>
    </span>
    <div class="competition-info">
      <span class="table-cell">
        <a href="javascript:;" class="ui-link">
          <span class="league">Serie B</span>
        </a>
      </span>
      <span class="val-box table-cell">
        <span class="val">2</span>
      </span>
    </div>
  </li>
</ul>

.children is for direct childs, whereas .find() will find any level child.

Docs:
https://api.jquery.com/children/
https://api.jquery.com/find/

Also, note that your ids shouldn't contain spaces.

Hope it helps.

score 1 · Answer 3 · answered Jun 06 '18 at 12:31

One option is using map

And on your ids should not contain any spaces as per this SO post.

var ids = $(".sportmenu li input").map(function() {
  return $(this).attr('id');
}).get();

console.log(ids);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<ul class="sportmenu ui-listview">
  <li class="table">
    <span class="fav-box table-cell">
      <input type="checkbox" id="TOP_SPORT-246712-Serie_A" class="star" readonly="" value="on">
      <label></label>
    </span>
    <div class="competition-info">
      <span class="table-cell">
        <a href="javascript:;" class="ui-link">
          <span class="league">Serie B</span>
      </a>
      </span>
      <span class="val-box table-cell">
        <span class="val">2</span>
      </span>
    </div>
  </li>
  <li class="table">
    <span class="fav-box table-cell">
      <input type="checkbox" id="TOP_SPORT-246712-Serie_B" class="star" readonly="" value="on">
      <label></label>
    </span>
    <div class="competition-info">
      <span class="table-cell">
        <a href="javascript:;" class="ui-link">
          <span class="league">Serie B</span>
      </a>
      </span>
      <span class="val-box table-cell">
        <span class="val">2</span>
      </span>
    </div>
  </li>
</ul>

Doc: map()

score 1 · Answer 4 · answered Jun 06 '18 at 12:34

You can use jQuery.map

var result = $(".sportmenu li input").map(function() {
return this.id
}).get()

console.log(result)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul class="sportmenu ui-listview">
  <li class="table">
    <span class="fav-box table-cell">
      <input type="checkbox" id="TOP_SPORT-246712-Serie B" class="star" readonly="" value="on">
      <label></label>
    </span>
    <div class="competition-info">
      <span class="table-cell">
        <a href="javascript:;" class="ui-link">
          <span class="league">Serie B</span>
        </a>
      </span>
      <span class="val-box table-cell">
        <span class="val">2</span>
      </span>
    </div>
  </li>
</ul>

How do you query for child elements while iterating through elements in jquery?

4 Answers4