Question

我在这里处理一些有趣的HTML。 Html，我希望我可以改变，但我不能不幸。

我在页面上有几个随机div，我需要能够设置样式。所以我需要为它们添加类，以便能够用css调用它们。这通常不是问题，除了关于它们的唯一独特之处是内容中的一个词。

html看起来像这样

<div id="qualities">Top content</div>
<div>Becky something</div>
<div>Becky something else</div>
<div>Becky something different</div>
<div>Other content that I don't want to select</div>
<div>More content I don't want to select</div>

所以我想选择所有的div（所以我可以添加一个类），其中包含'Becky'一词，但没有其他div。

我不想查看页面上方的任何其他元素。有没有办法可以选择这些div？这个页面是动态的，所以可能有两个，三个，四个，所以我试图避免next()或任何非特定的。

我抓住了我的老生，就是贝基。

var catName = $('.pageCenterTitle').text()
catName = catName.replace(/(\w+).*/,"$1");

并且一直在尝试“包含”的不同变体，但一直都失败了。

Answer 1

解决这个问题的方法可以基于元素交互：

$('#qualities').nextAll('div')

在 #qualities 之后获取所有div。

＆＃13;

$('#qualities').nextAll('div').each(function(idx, ele) {
    if (ele.textContent.indexOf('Becky') != -1) {
        ele.classList.add('redClass')
    }
})

＆＃13;

.redClass {
      background-color: red;
  }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id="qualities">Top content</div>
<div>Becky something</div>
<div>Becky something else</div>
<div>Becky something different</div>
<div>Other content that I don't want to select</div>
<div>More content I don't want to select</div>

＆＃13;

Answer 2

您可以使用:contains选择器并选择“Becky”等所有内容要选择在给定元素旁边和之后的所有匹配元素，您可以使用nextAll

$('#qualities').nextAll('div:contains("Becky")').addClass('becky')

.becky {color:red}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>Becky something else</div>
<div id="qualities">Top content</div>
<div>Becky something</div>
<div>Becky something else</div>
<div>Becky something different</div>
<div>Other content that I don't want to select</div>
<div>More content I don't want to select</div>

使用其中的内容将类添加到多个div

2 个答案: