Question

我有一个div元素，其中包含动态创建类名的其他div元素。我需要搜索容器div元素的内容，并通过其类名的前3个字母找到div元素。

示例：

<div>
  <div class="CTR-???????">
  </div>
  <div class="CTR-???????">
  </div>
  <div class="CTR-???????">
  </div>
</div>

我确信有一种方法可以用Javascript来做到这一点，但我找不到那种方式。

有人可以帮忙吗？

Answer 1

再分配一些课程：

<div>
  <div class="CTR CTR-???????">
  </div>
  <div class="CTR CTR-???????">
  </div>
  <div class="CTR CTR-???????">
  </div>
</div>

现在您可以通过查找.CTR找到这些内容。在jQuery中，这将是$('.CTR')或简单的JS document.getElementsByClassName('CTR')

Answer 2

原生JavaScript解决方案

您可以将document.querySelectorAll与^= substring-matching attribute selector结合使用：

var elems = document.querySelectorAll('div[class^="CTR"]');

这将返回一个包含匹配元素的NodeList，它看起来像一个数组：

> [<div class="CTR-???????"></div>,
   <div class="CTR-???????"></div>,
   <div class="CTR-???????"></div>]

然后，您可以按索引访问各个选定的元素：

elems[0];
> <div class="CTR-???????"></div>

工作演示

＆＃13;

var elems = document.querySelectorAll('div[class^="CTR"]');

elems[0].style.color = '#f00';
elems[1].style.color = '#0f0';
elems[2].style.color = '#00f';

＆＃13;

<div>
  <div class="CTR-???????">1</div>
  <div class="CTR-???????">2</div>
  <div class="CTR-???????">3</div>
</div>

＆＃13;

jQuery解决方案

如果你正在使用jQuery，你可以简单地将我在上面的querySelectorAll示例中使用的相同字符串传递给jQuery选择器：

$('div[class^="CTA"]')

工作演示

＆＃13;

var elems = $('div[class^="CTR"]');

$(elems[0]).css('color', '#f00');
$(elems[1]).css('color', '#0f0');
$(elems[2]).css('color', '#00f');

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
  <div class="CTR-???????">1</div>
  <div class="CTR-???????">2</div>
  <div class="CTR-???????">3</div>
</div>

＆＃13;

Answer 3

这样的事情怎么样：

document.querySelectorAll('[class^="CTR-"], [class*=" CTR-"]');

Answer 4

在jQuery中，您可以通过选择div以及以CTR开头的类来轻松完成此操作，并检查它们是否包含如下搜索字词：

$('div[class^="CTR"]:contains("Term that content has to require")').each(function() {
// do something
});

按类名搜索并查找DIV的内容

4 个答案:

原生JavaScript解决方案

工作演示

jQuery解决方案

工作演示