如何从多个列表项中的元素获取值

debugcn 发表于 Dev

用户名

我有很多div的li元素。我想从班级.Value和班级那里得到课文.Name。如何以这种格式获取这些值：

25,ok
80,good
90,no

<ul>
  <li>
    <div class="...">
      <div class="...">
        ....
        <div class="Value">25</div>
        <div class="Name">ok</div>
      </div>
    </div>
  </li>
  <li>
    <div class="...">
      <div class="...">
        ....
        <div class="Value">80</div>
        <div class="Name">good</div>
      </div>
    </div>
  </li>
  <li>
    <div class="...">
      <div class="...">
        ....
        <div class="Value">90</div>
        <div class="Name">no</div>
      </div>
    </div>
  </li>
  ...
</ul>

罗里·麦克罗森（Rory McCrossan）

给定HTML的结构，您可以遍历li元素并用于map()创建一个对象数组，其中包含.Value和的文本值.Name，如下所示：

var arr = $('ul li').map(function() {
  var $li = $(this);
  return {
    value: $li.find('.Value').text(),
    name: $li.find('.Name').text()
  }
}).get();

console.log(arr);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li>
    <div class="...">
      <div class="...">
        ....
        <div class="Value">25</div>
        <div class="Name">ok</div>
      </div>
    </div>
  </li>
  <li>
    <div class="...">
      <div class="...">
        ....
        <div class="Value">80</div>
        <div class="Name">good</div>
      </div>
    </div>
  </li>
  <li>
    <div class="...">
      <div class="...">
        ....
        <div class="Value">90</div>
        <div class="Name">no</div>
      </div>
    </div>
  </li>
</ul>

或者，您可以使用相同的技术来返回2d数组中的值，如下所示。不过，我更喜欢前者。

var arr = $('ul li').map(function() {
  var $li = $(this);
  return [[ $li.find('.Value').text(), $li.find('.Name').text() ]]
}).get();

console.log(arr);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li>
    <div class="...">
      <div class="...">
        ....
        <div class="Value">25</div>
        <div class="Name">ok</div>
      </div>
    </div>
  </li>
  <li>
    <div class="...">
      <div class="...">
        ....
        <div class="Value">80</div>
        <div class="Name">good</div>
      </div>
    </div>
  </li>
  <li>
    <div class="...">
      <div class="...">
        ....
        <div class="Value">90</div>
        <div class="Name">no</div>
      </div>
    </div>
  </li>
</ul>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。