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

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

您没有包括jQuery。
您没有将脚本包装在$(document).ready(function(){.....});中。现在，由于您只是在摆弄小提琴，因此有时可以避免这种情况，因为有些东西被注入了，但是如果您在常规页面上运行该代码，那么（没有可靠地）没有document.ready就无法工作。
您正在检查完全相等。听起来不错，但是有空白是您无法解决的。如果将其更改为<div class="menu-item-category">Offer</div>，则会看到不同之处。

您的代码不执行您在问题中描述的内容。

$(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 2

根据您的JSFiddle和注释，您将需要遍历所选元素，比较与该类选择器匹配的每个元素的text()。否则，text()将返回“匹配元素集中每个元素的组合文本内容”。

我还添加了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>

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>

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

3 个答案: