从具有特定类的div列表中获取div

Question

我有div list ，并希望在包含像state-expanded这样的指定类时得到div 。 例如，我有两个不同的divs ：

<div class="row-popular state-expanded no-sibling-group">
    <span class="cell cell-id-name" style="flex: 1 1 63px;">
       <span>TEST</span>
    </span>
</div>

<div class="row-popular state-collapsed no-sibling-group">
    <span class="cell cell-id-name" style="flex: 1 1 63px;">
       <span>OTHER</span>
    </span>
</div>

第一个div有状态state-expanded和第二个state-collapsed 。 我想要得到的值span ，其中类div是state-expanded 。

这份list声明：

var allDivs = document.getElementsByTagName('div');

在我上面写的示例中，它应该返回值TEST 。 请只JavaScript - 而不是jquery等。

知道怎么弄它？

Answer 1

您可以使用querySelectorAll选择所有div，然后检查每个div以查看它是否包含类DEMO

var divs = document.querySelectorAll('div');
for (var i = 0; i < divs.length; i++) {
  if (divs[i].getAttribute('class').includes('state-expanded')) {
    console.log(divs[i].querySelector('span').innerHTML);
  }
}

编辑：如果你想更改最后一个跨栏孩子的文本，你可以像这个演示一样

Answer 2

您可以使用

使用javascript并使用jQuery的document.getElementsByClassName('state-expanded') 。

$('.state-expanded')

Answer 3

试试这个 - var neededDiv = document.getElementsByClassName('state-expanded')[0]或者你也可以像这样使用querySelector ：

var neededDiv = document.querySelector('.state-expanded');

要么

var neededDiv = document.querySelector('.state-expanded span span');

如果您需要使用'TEST'代码获得嵌套跨度。（根据您的示例）

Answer 4

这是另一个答案。

var data  = document.getElementsByClassName('state-expanded')[0];
var data1 = data.getElementsByTagName('span')[1].innerHTML;

console.log(data1);

输出： TEST

它将要做的是，首先在数据变量中它将获得“状态扩展”div，然后在第二行中我们获得第二个值范围（innerHTML），因此它将返回TEST。

这是一个小提琴： https ： //jsfiddle.net/9p9ygd01

Answer 5

尝试使用以下代码...

 $(document).ready(function(){ var $element = $('.state-expanded span span').html(); alert($element); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <div class="row-popular state-expanded no-sibling-group"> <span class="cell cell-id-name" style="flex: 1 1 63px;"> <span>TEST</span> </span> </div> <div class="row-popular state-collapsed no-sibling-group"> <span class="cell cell-id-name" style="flex: 1 1 63px;"> <span>OTHER</span> </span> </div> 

Answer 6

您可以使用querySelectorAll ：

var txt = document.querySelectorAll('div.state-expanded span span')[0].textContent;

querySelectorAll将返回包含在带有state-expanded类的div中的span中的span元素。

querySelectorAll返回一个NodeList，但因为在你的情况下只有一个元素你可以获取第一个元素（即：[0]）。

对于包含在其中的文本，您可以使用textContent属性。

如果您需要循环使用querySelectorAll获得的所有结果，您需要将NodeList转换为数组，而不是使用forEach函数，如：

[].slice.call(document.querySelectorAll('div.state-expanded span span')).forEach(function(currValue, index) {
   alert(currValue.textContent);
});

 window.onload = function() { var txt = document.querySelectorAll('div.state-expanded span span')[0].textContent; document.body.innerHTML += '<br>Result: ' + txt; [].slice.call(document.querySelectorAll('div.state-expanded span span')).forEach(function(currValue, index) { document.body.innerHTML += '<br>Result in forEach loop: index=' + index + ' textContent=' + currValue.textContent; }); }; 

 <div class="row-popular state-expanded no-sibling-group"> <span class="cell cell-id-name" style="flex: 1 1 63px;"> <span>TEST</span> </span> </div> <div class="row-popular state-collapsed no-sibling-group"> <span class="cell cell-id-name" style="flex: 1 1 63px;"> <span>OTHER</span> </span> </div>