如果div包含特定的单词，请使用jquery在父div中添加一个新类

Question

这是HTML代码：

<div class="menu-3-cat">
<div class="menu-item-category">Offer</div>
</div> 

这是jquery

if ($('.menu-item-category').text() === 'Offer') {
$('.menu-3-cat').addClass('make-me-red');
}

它应该是工作的，并将类"make me red"添加到父div"menu-3-cat"中，但它没有。我做错了什么？

JSFiddle HERE

Answer 1

根据您的JSFiddle和注释，您需要比较每个选定元素的text()。否则text()将返回"0">匹配元素集合中每个元素的组合文本内容"；。

一种方法是迭代每个元素：

我还添加了trim()，以从元素的文本内容中去除任何空白。

var $categories = $('.menu-item-category');
$categories.each(function() {
var $this = jQuery(this);
if ($this.text().trim() == 'Offer') {
$this.closest('.menu-3-cat').addClass('make-me-red');
}
});

.menu-3-cat {
position: relative;
overflow: hidden;
}
.make-me-red {
background: #F44336;
color: #ffffff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu-3-cat">
<div class="menu-item-category">
Things
</div>
</div>
<div class="menu-3-cat">
<div class="menu-item-category">
Offer
</div>
</div>
<div class="menu-3-cat">
<div class="menu-item-category">
Stuff
</div>
</div>

另一种方法是将所选内容过滤为文本为"0"的元素；要约"；在添加类之前。

const $categories = $('.menu-item-category');
$categories
.filter((k, elm) => jQuery(elm).text().trim() == 'Offer')
.closest('.menu-3-cat')
.addClass('make-me-red')

.menu-3-cat {
position: relative;
overflow: hidden;
}
.make-me-red {
background: #F44336;
color: #ffffff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu-3-cat">
<div class="menu-item-category">
Things
</div>
</div>
<div class="menu-3-cat">
<div class="menu-item-category">
Offer
</div>
</div>
<div class="menu-3-cat">
<div class="menu-item-category">
Stuff
</div>
</div>
<div class="menu-3-cat">
<div class="menu-item-category">
Nothing
</div>
</div>
<div class="menu-3-cat">
<div class="menu-item-category">
Offer
</div>
</div>
<div class="menu-3-cat">
<div class="menu-item-category">
Last One
</div>
</div>

Answer 2

好吧，你的小提琴大约有4个问题。

1. 您没有包含jQuery。

2. 您没有将脚本包装在$(document).ready(function(){.....});中。现在，由于你处于困境，你有时可以逃脱惩罚，因为有些东西会被注入，但如果你在常规页面上运行代码，如果没有文档，它就无法(可靠地(工作。ready.

3. 您正在检查是否完全相等。这听起来不错，但有一些空白是你没有考虑的。如果您将其更改为<div class="menu-item-category">Offer</div>，那么您将看到差异。

4. 您的代码没有执行问题中描述的操作。

   $(document).ready(function(){
   if ($('.menu-item-category').text() === 'Offer') {
   $('.menu-3-cat').addClass('make-me-red');
   }
   })
   

这是你的小提琴，正在演奏。https://jsfiddle.net/mdzu4cny/13/

编辑：根据你的确切目标，使用修剪或子字符串会更好，而不是检查精确的相等

编辑2：根据注释，您有多个块，因此需要迭代。试试这样的东西：

$(document).ready(function(){   
$('.menu-item-category').each(function(){
var $this = $(this);
if($this.text().indexOf('Offer') > -1)
$this.closest('.menu-3-cat').addClass('make-me-red')
})  
})

Answer 3

您的代码中有两个问题，div中有一行空行包含文本"Offer"，因此当将其与if语句中的Offer进行比较时，它返回false。我删除了div中的空格，所以if语句返回true。

您还需要一个文档就绪标记，以便在页面加载时运行if语句

这是完整的工作代码

$(document).ready(function(){
	if ($('.menu-item-category').text() === 'Offer') {
		$('.menu-3-cat').addClass('make-me-red');
}
});

.menu-3-cat {
position:relative;
overflow:hidden;
}
.make-me-red {
background:#F44336;
color:#ffffff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu-3-cat">
<div class="menu-item-category">Offer</div>
</div>