Question

我有一个简单的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>

我想使用他们的类名访问这些span值（包含每个值），但我不能使用任何ID。

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

我该怎么做？

Answer 1

你必须尝试这样，因为有更多元素与类

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

上面的代码使用each函数遍历所有元素和text函数来打印文本ob每个元素

Answer 2

你可以尝试这个以获取你需要的更多信息检查jquery。每种方法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>

Answer 3

要获取具有相同课程的所有<span></span>数据，您需要应用.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>

参考

.join()

Answer 4

您还可以在跨度上应用.each（）以获取所有跨度数据后尝试.html（），而.html（）不会对任何字符进行编码。

＆＃13;

var firstTimeResults = data.results;

＆＃13;

$('.tknz-token-label').each(function(){
    console.log($(this).html());
});

＆＃13;

Answer 5

为了存储跨距的值，请将它们放在一个数组中以备将来使用。您可以使用类选择器中的数组上的map来完成此操作。

只需重复vals即可保留["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>

Answer 6

您可以使用span访问$('selector').text()值。这是一个例子。

$('.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>

Answer 7

Getting all inner text of divs with same class

可能重复

使用javascript有很多很好的方法，你不必只是jquery。

您所说的是获取文档的文本内容。

您可以通过以下方式实现这一目标：

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

或

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

就像在顶部的链接一样。

Answer 8

具有完整DOM结构的解决方案

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

如何使用类获得价值

8 个答案: