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

Question

我在 li 元素中有很多 div。我想从类 .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>

Answer 1

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

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>

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

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>