通过jQuery查找第一个父元素并添加类

Question

HTML:

<div class="views-row views-row-10 views-row-even views-row-last">    
  <div class="sonuc">        
    <span>text1</span>  
  </div>
</div>
<div class="views-row views-row-11 views-row-even views-row-last">    
  <div class="sonuc">        
    <span>text2</span>  
  </div>

JS：

if ($(".sonuc").has(":contains('text1')").length) {
  $('.sonuc').parent().addClass('hobi')
}

它的工作原理，但会将 hobi 类添加到所有父级 div 中。但我只想添加到 text1 的父级 div 中。我该如何修复它？

- Bariskonat

---

他的代码本身正在将“hobi”添加到两个div中，但问题是它正在添加到两个div中。因此，我认为他的if条件检查不正确。 - Suchit kumar

@Bariskonat，您能否澄清一下您是否需要匹配所有包含文本“text1”的实例，仅限于该文本，还是您还需要匹配例如“text11”和“text1 abc”等内容？ - JM Hicks

Answer 1

您可以将:contains选择器与所需的div选择器一起使用：

 $('.views-row:contains(text1)').addClass('hobi');

可运行的代码示例

- Milind Anantwar

---

使用 :contains 时遇到了一点问题，你可以在这个 fiddle 中查看。 - Alex Char

这不是 OP 拥有的 DOM。这个解决方案适用于当前提供的 DOM。 - Milind Anantwar

Answer 2

jquery选择器 :contains() 匹配包含指定字符串的任何元素。我建议使用 .filter()：

$(".sonuc span").filter(function() {
  return this.innerText === "text1";
}).parents("div.views-row").addClass("active");

.active {
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="views-row views-row-10 views-row-even views-row-last">
  <div class="sonuc">
    <span>text1</span> 
  </div>
</div>
<div class="views-row views-row-11 views-row-even views-row-last">
  <div class="sonuc">
    <span>text2</span> 
  </div>
  <div class="views-row views-row-11 views-row-even views-row-last">
    <div class="sonuc">
      <span>text11</span> 
    </div>

- Alex Char

---

这就是我即将发布的内容。 - Jai

这是 OP 应该使用的内容。 - Suchit kumar

Answer 3

尝试在不使用if语句的情况下，因为它在这种情况下完全没有必要。

$(".sonuc").has("span:contains('text1')").parent().addClass('hobi')

- Rajaprabhu Aravindasamy

Answer 4

您可以在一个筛选器中找到正确的元素：

$(".sonuc:contains('text1')").parent().addClass('hobi');

如果你真的是指第一个父级，那么只需要使用:eq()：

$(".sonuc:eq(0)").parent().addClass('hobi');

- Rhumborl

Answer 5

你正在尝试查找 sonuc 的父级，但只给 sonuc 添加类。

if ($(".sonuc").has(":contains('text1')").length) {
  $('.sonuc').addClass('hobi')
}

- Bhushan Kawadkar

Answer 6

只需将您已经拥有的内容组合在一起。

$('.sonuc').has(":contains('text1')").parent().addClass('hobi');

Maybe its不是测试文本的好主意，它可能会改变...

要获取一组元素的第一个元素，您可以：

$('.sonuc').eq(0).parent().addClass('hobi');

or

$('.sonuc:eq(0)').parent().addClass('hobi');

- Thomas Fellinger

Answer 7

Just add first() in your jquery

if ($(".sonuc").has(":contains('text1')").length) {
  $('.sonuc').first().parent().addClass('hobi')
}

.hobi{
color:red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="views-row views-row-10 views-row-even views-row-last">    
  <div class="sonuc">        
    <span>text1</span>  
  </div>
</div>
<div class="views-row views-row-11 views-row-even views-row-last">    
  <div class="sonuc">        
    <span>text2</span>  
  </div>

- Tushar

Answer 8

一种更简单、直接的方法而不使用:contains，.filter()是：

$('.sonuc > span:first').parent().addClass('hobi');

它选择 .sonuc 类下的第一个直接子元素span，然后通过使用 .parent() 选择其父元素，并在其中添加 '.hobi' 类。

工作的JSFiddle演示

---

$('.sonuc > span:first').parent().addClass('hobi');

.hobi {
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div class="views-row views-row-10 views-row-even views-row-last">
  <div class="sonuc"> <span>text1</span>

  </div>
</div>
<div class="views-row views-row-11 views-row-even views-row-last">
  <div class="sonuc"> <span>text2</span> 
  </div>
</div>

- Suhaib Janjua