Comment puis-je obtenir des valeurs d'éléments dans plusieurs éléments de liste

user9461375

J'ai beaucoup divd' liéléments. Je veux obtenir le texte de la classe .Valueet .Name. Comment puis-je obtenir ces valeurs dans ce 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>

Rory McCrossan

Compte tenu de la structure du HTML, vous pouvez faire une boucle sur les liéléments et utiliser map()pour créer un tableau d'objets contenant les valeurs de texte des divs .Valueet .Name, comme ceci:

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>

Vous pouvez également utiliser la même technique pour renvoyer les valeurs dans un tableau 2d, comme ci-dessous. Ma préférence va cependant au premier.

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>

Articles connexes