如何从多个列表项中的元素获取值 [英] How can I get values from elements in multiple list items

问题描述

我在li元素中有很多div.我想从类.Value和.Name中获取文本.如何以这种格式获取这些值:

I have many div in li elements. I want to get the text from class .Value and .Name. How can I get these values in this format:

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>

推荐答案

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

Given the structure of the HTML you can loop over the li elements and use map() to create an array of objects which hold the text values of the .Value and .Name divs, like this:

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数组中的值，如下所示.不过，我更喜欢前者.

Alternatively you could use the same technique to return the values in a 2d array, like the below. My preference is for the former, though.

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>

这篇关于如何从多个列表项中的元素获取值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！