JQuery 元素列表

Question

我有一个 HTML 页面，如下所示:

<div class="class1 class2 class3" >
   <div class="title">
       <a class="class5">Options</a>
   </div>
   <div class="class6">
       <a class="class7" >Clear All</a>
   </div>
   <div class="class8 disabled">
       <ul class="class9">
           <li>
               <label>Size:</label>
               <span class="option">150</span>
           </li>
           <li>
               <label>Color:</label>
               <span class="option">Red</span>
           </li>
       </ul>
   </div>
</div>

和一个 JQuery，准备好文档，如下所示:

$(document).ready(function () {
    var optionTexts = [];
    var _selectedOptions = $( ".class1 class2 class3" ).find( "class9" ).find("li");


    _selectedOptions.each(function(i, v){
        optionTexts.push($(this).text())
    });
    console.log('options: ' + optionTexts);
});

我需要的是检索一个可以迭代的li数组，并且对于每个li，我可以提取元素的intnerText，例如:

元素:大小

值(value):150

元素:颜色

值:红色

Answer 1

你离我们并不遥远。要选择具有多个类的元素，请将它们组合在一起，不带空格，例如:

.class1.class2.class3

并选择一个子项(不一定是直接子项)，请使用空格 - 这与 .find

$(".class1 .class9") == $(".class1").find(".class9")

然后，您可以使用 .map 从每个 li 中提取所需的值，为您的对象提供两个字段“元素/值”。

最后，使用 .toArray 将 .map 输出转换为数组，给出单行代码(为了清晰起见，进行了格式化):

var result = $(".class1.class2.class3 .class9 li")
  .map(function() {
    return {
      "Element": $("label", this).text(),
      "Value": $(".option", this).text()
    }
  })
  .toArray();
  
console.log(result);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="class1 class2 class3">
  <div class="title">
    <a class="class5">Options</a>
  </div>
  <div class="class6">
    <a class="class7">Clear All</a>
  </div>
  <div class="class8 disabled">
    <ul class="class9">
      <li>
        <label>Size:</label>
        <span class="option">150</span>
      </li>
      <li>
        <label>Color:</label>
        <span class="option">Red</span>
      </li>
    </ul>
  </div>
</div>