CODEWITHSUNDEEP
jqueryhtml
user9461375
user9461375

Reputation:

How can I get values from elements in multiple list items

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>

Upvotes: 2

Views: 48

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337560

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>

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>

Upvotes: 1

Related Questions