在迭代jquery中的元素时，如何查询子元素？

Question

我能够获取父元素但我无法成功获取子元素及其属性。我希望能够在下面的input元素中提取id并将其放在名为links的数组中。

我试过这个

＆＃13;

＆＃13;

var links = [];

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以使用find和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>

Answer 2

在您的代码中，只需将.children()更改为.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适用于直接孩子，而.find()会找到任何级别的孩子。

文档：
https://api.jquery.com/children/
https://api.jquery.com/find/

另请注意，您的id不应包含空格。

希望它有所帮助。

Answer 3

一种选择是使用map

根据this SO post，id上的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>

HTTP Status 404 – Not Found

Type Status Report

Message /guacamole

Description The origin server did not find a current representation for the target resource or is not willing to disclose that one exists.
Apache Tomcat/8.5.30 (Ubuntu)

Doc：map()

Answer 4

您可以使用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>