Question

我有list div并希望在包含div等指定类时获取state-expanded。例如，我有两个不同的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);
  }
}

编辑：如果您想要更改最后一个跨栏孩子的文本，您也可以像Demo

那样进行更改

Answer 2

您可以使用

使用javascript

document.getElementsByClassName('state-expanded') 如果您使用的是jQuery。

$('.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＆＃39;”进行嵌套跨度其中的代码。（根据你的例子）

Answer 4

这是另一个答案。

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

console.log(data1);

输出：TEST

它将要做的是，首先在数据变量中它将获得'state-expanded'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将返回包含在包含在状态展开类中的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>

从具有特定类

6 个答案: