2014-02-02 9 views
9

Мне нужно добавить класс к родительскому div, если один из дочерних элементов содержит слово «Sponsored».jquery, если элемент содержит текст, добавьте класс в родительский div

<div id="post-item"> 
    <span class="tags"> 
     <a href="#">Blogs</a>    
    </span>   
</div> 

<div id="post-item"> 
    <span class="tags"> 
     <a href="#">Sponsored by Lorem Ipsum</a>    
    </span>  
</div> 

В настоящее время я пытаюсь использовать parent(). AddClass, но по какой-то причине он не работает. Вы можете увидеть пример в этой скрипкой: http://jsfiddle.net/VrPdF/

if (jQuery('a:contains("Sponsored")').length) { 
    jQuery(this).parent('#post-item').addClass('sponz'); 

} 

Любое и вся помощь будет принята с благодарностью - спасибо!

ответ

13

идентификаторы дубликата ID должен быть уникальным, поэтому использовать класс для идентификации родителя. Вы можете использовать .closest(), чтобы идентифицировать родителя с классом post-item.

HTML

<div class="post-item"> 
    <span class="tags"> 
     <a href="#">Blogs</a> 
    <h3>Lorem</h3>   
    </span>   
</div> 

<div class="post-item"> 
    <span class="tags"> 
     <a href="#">Sponsored by Lorem Ipsum</a>    
    </span>  
    <h3>Lorem</h3> 
</div> 

JavaScript

jQuery('a:contains("Sponsored")').closest('.post-item').addClass('sponz'); 

DEMO


:has() Selector также может быть использован

Выбирает элементы, которые содержат, по меньшей мере, один элемент, который соответствует указанному селектору.

jQuery('.post-item:has(a:contains("Sponsored"))').addClass('sponz'); 

jsFiddle

+1

Спасибо! Это отличное решение. – user3263728

4

Вам не нужно проверять длину, либо возвращает элемент, либо нет, и вам нужно будет использовать closest(), так как #post-item не является непосредственным родительским элементом.

Я использовал классы, как вы не можете использовать

$('a:contains("Sponsored")').closest('.post-item').addClass('sponz'); 

FIDDLE

+0

Спасибо !! Именно по этой причине это не сработает и станет отличным решением. – user3263728

1

После должен быть ваш JavaScript.

$(document).ready(function() { 
    jQuery('a:contains("Sponsored")').closest('#post-item').addClass('sponz'); 
}); 

Demo

Смежные вопросы