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 таких элементов, как:

Элемент : Размер

Значение : 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>

Answer 2

Сначала вы выбираете .class1.class2.class3, это один элемент, поэтому вы можете выбрать его с помощью этих 3 классов (можно ли предложить использовать ID или более читаемый класс?), А затем .class9 внутри него. Затем вы просматриваете каждый <li>, находите его <span> и <label> и захватываете текст.

$(document).ready(function() {
  var optionTexts = [];
  $(".class1.class2.class3 .class9").find("li").each(function() {
    optionTexts.push({
      'element': $(this).find("label").text(),
      'value': $(this).find("span").text()
    });
  });
  console.log('options: ', optionTexts);
});

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