CODEWITHSUNDEEP
javascriptjquerycss
sach
sach

Reputation: 3

how to capture text in different variables with same class name in javascript jquery

I need to capture the texts i.e.'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>

Upvotes: 0

Views: 49

Answers (5)

Swaraj Mahajan
Swaraj Mahajan

Reputation: 1

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.

Upvotes: 0

Mahmoud Sharif
Mahmoud Sharif

Reputation: 48

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

Upvotes: 0

Ricardo Gamarra
Ricardo Gamarra

Reputation: 83

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?

Upvotes: 0

holydragon
holydragon

Reputation: 6728

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();

Upvotes: 0

CertainPerformance
CertainPerformance

Reputation: 370889

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>

Upvotes: 1

Related Questions