如何在javascript jquery中使用相同的类名捕获不同变量中的文本

Question

I need to capture the texts ie'You're not sure about' and 'Ways to get assistance' in different variables. however when i try using this

$('.perind-details__summary-text').text();

I am getting result in same variable as " You're not sure about Ways to get assistance " How to capture these two different texts in different variables?

<details class="perind-details" open="">
    <summary class="perind-details__summary" role="button" volu-controls="short-content-0" volu-expanded="true">
      <span class="perind-details__summary-text">
        You're not sure about
      </span>

<details class="perind-details" open="">
    <summary class="perind-details__summary" role="button" volu-controls="short-content-0" volu-expanded="true">
      <span class="perind-details__summary-text">
        Ways to get assistance
      </span>
    </summary>

Answer 1

Use .map first instead:

 const texts = $('.perind-details__summary-text') .map(function() { return $(this).text().trim() }) .get(); console.log(texts); const [text1, text2] = texts; 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <details class="perind-details" open=""> <summary class="perind-details__summary" role="button" volu-controls="short-content-0" volu-expanded="true"> <span class="perind-details__summary-text"> You're not sure about </span> <details class="perind-details" open=""> <summary class="perind-details__summary" role="button" volu-controls="short-content-0" volu-expanded="true"> <span class="perind-details__summary-text"> Ways to get assistance </span> </summary> 

Or, no need for a big library like jQuery for something this simple:

 const texts = Array.prototype.map.call( document.querySelectorAll('.perind-details__summary-text'), elm => elm.textContent.trim() ); console.log(texts); 

  <summary class="perind-details__summary" role="button" volu-controls="short-content-0" volu-expanded="true"> <span class="perind-details__summary-text"> You're not sure about </span> <details class="perind-details" open=""> <summary class="perind-details__summary" role="button" volu-controls="short-content-0" volu-expanded="true"> <span class="perind-details__summary-text"> Ways to get assistance </span> </summary> 

Answer 2

You should use id attribute to make it easier for the selector to find it.

<details class="perind-details" open="">
    <summary class="perind-details__summary" role="button" volu-controls="short-content-0" volu-expanded="true">
      <span id="perind-details__summary-text-1">
        You're not sure about
      </span>

<details class="perind-details" open="">
    <summary class="perind-details__summary" role="button" volu-controls="short-content-0" volu-expanded="true">
      <span id="perind-details__summary-text-2">
        Ways to get assistance
      </span>
    </summary>

then you use it like this to select the specific id.

var text1 = $('#perind-details__summary-text-1').text();
var text2 = $('#perind-details__summary-text-2').text();

Answer 3

I assume you're using class in CSS. So you can't just change class to solve the issue, but why don't you add an ID to each input?

Answer 4

var text1 = $('.perind-details__summary-text').eq(0).text();
var text2 = $('.perind-details__summary-text').eq(1).text();

Answer 5

A better way if you don't want to use ID. Then create a variable as an array. Iterate the class node then you can push that text in the array. Later you can use that array to use pushed text wherever you want.