CODEWITHSUNDEEP
jqueryhtml
aparna rai
aparna rai

Reputation: 833

How to Get Value Using Class

I have a simple div

<div class="tknz-list">
    <div class="tknz-token" data-token="t"><span class="tknz-token-label">t</span><span class="tknz-token-x">×</span></div>
    <div class="tknz-token" data-token="u"><span class="tknz-token-label">u</span><span class="tknz-token-x">×</span></div>
    <div class="tknz-token" data-token="i"><span class="tknz-token-label">i</span><span class="tknz-token-x">×</span></div>
</div>

I want to access these span values (with each value) using their class name, but I cannot use any ids.

<span class="tknz-token-label">t</span>
<span class="tknz-token-label">x</span>
<span class="tknz-token-label">u</span>

How can I do this?

Upvotes: 2

Views: 612

Answers (8)

Death-is-the-real-truth
Death-is-the-real-truth

Reputation: 72289

To get all <span></span> data which have the same class, You need to apply .each()

$(document).ready(function(){
span_array = [];//define array
  $(".tknz-token-label").each(function(){// iterate over same class spans
    console.log($(this).text()); // print the text of each span
    span_array.push($(this).text());// push span text to array
  });
  console.log(span_array); // you can save data an array for further use
  
  var final_string = span_array.join(); //join array value as string
  console.log(final_string); // check string 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tknz-list">
  <div class="tknz-token" data-token="t"><span class="tknz-token-label">t</span><span class="tknz-token-x">×</span></div>
  <div class="tknz-token" data-token="u"><span class="tknz-token-label">u</span><span class="tknz-token-x">×</span></div>
  <div class="tknz-token" data-token="i"><span class="tknz-token-label">i</span><span class="tknz-token-x">×</span></div>
</div>

Reference

.join()

Upvotes: 1

Pranay Rana
Pranay Rana

Reputation: 176896

You have to try like this as there is are more element with class 

let span_text:string = [];
$(".tknz-token-label").each(function() {
  span_text.push($( this ).text());
  console.log( $( this ).text() );
});
var alltext= span_text.join();
console.log(alltext);

code above make use of each function to go through all element and text function to print out text ob each element

Upvotes: 2

Kiran Shahi
Kiran Shahi

Reputation: 7980

You can access span value with $('selector').text(). Here is example. 

$('.tknz-token-label').each(function(){
  console.log($(this).text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tknz-list">
  <div class="tknz-token" data-token="t"><span class="tknz-token-label">t</span><span class="tknz-token-x">×</span></div>
  <div class="tknz-token" data-token="u"><span class="tknz-token-label">u</span><span class="tknz-token-x">×</span></div>
  <div class="tknz-token" data-token="i"><span class="tknz-token-label">i</span><span class="tknz-token-x">×</span></div>
</div>

Upvotes: 0

Gagan Deep
Gagan Deep

Reputation: 1509

The solution with the complete DOM Structure

$('.tknz-list .tknz-token .tknz-token-label').each(function(){
 alert($(this).text());
});

Upvotes: 0

Lorddirt
Lorddirt

Reputation: 470

Possible duplicate of Getting all inner text of divs with same class

There are many good ways to do it with javascript, and you don't have to just jquery.

What you are saying, is to get the document.textContent of divisions.

You can do that in many ways like:

Array.from( document.getElementsByClassName( 'company Name' ), e => e.innerText )

or

var x = document.querySelectorAll("[class='company Name']");
for (var i=0;i<x.length;i++) {
//grab x[i].innerHTML (or textContent or innerText)
}

like in the link at the top.

Upvotes: 0

Travis J
Travis J

Reputation: 82267

In order to store the values from the spans, place them in an array for later use. You can use map on the array from the class selector to accomplish this.

Simply reuse vals which will hold ["t","u","i"]

var vals = $(".tknz-token-label").toArray().map(t => $(t).text());
console.log(vals);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tknz-list">
<div class="tknz-token" data-token="t"><span class="tknz-token-label">t</span><span class="tknz-token-x">×</span></div>
<div class="tknz-token" data-token="u"><span class="tknz-token-label">u</span><span class="tknz-token-x">×</span></div>
<div class="tknz-token" data-token="i"><span class="tknz-token-label">i</span><span class="tknz-token-x">×</span></div>

Upvotes: 1

Sudhir Ojha
Sudhir Ojha

Reputation: 3305

You can also try for .html() to after applying .each() on your span to get all span data, while .html() will not encode any characters.

$('.tknz-token-label').each(function(){
    console.log($(this).html());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tknz-list">
<div class="tknz-token" data-token="t"><span class="tknz-token-label">t</span><span class="tknz-token-x">×</span></div>
<div class="tknz-token" data-token="u"><span class="tknz-token-label">u</span><span class="tknz-token-x">×</span></div>
<div class="tknz-token" data-token="i"><span class="tknz-token-label">i</span><span class="tknz-token-x">×</span></div>
</div>

Upvotes: 1

Sharma Vikram
Sharma Vikram

Reputation: 2470

you can try this for more information you need check jquery . each method jQuery each 

$('.tknz-token-label').each(function(){
     console.log($(this).text());
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<div class="tknz-list">
<div class="tknz-token" data-token="t"><span class="tknz-token-label">t</span><span class="tknz-token-x">×</span></div>
<div class="tknz-token" data-token="u"><span class="tknz-token-label">u</span><span class="tknz-token-x">×</span></div>
<div class="tknz-token" data-token="i"><span class="tknz-token-label">i</span><span class="tknz-token-x">×</span></div>

Upvotes: 2

Related Questions