Finden erste Eltern und fügen Klasse über 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') 
} 

Seine Arbeit aber hobi Klasse alle übergeordneten div-Tags hinzufügen. Aber ich möchte nur das Elternteil von text1 hinzufügen. Wie kann ich es reparieren?

Answer 1

Versuchen Sie, den Code ohne if Anweisung zu verwenden, das ist in diesem Kontext völlig unnötig.

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

Answer 2

Sie versuchen, Eltern von sonuc zu finden, aber Klasse sonuc nur

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

Answer 3

jquery Selektor :contains() Spiel jedes Element hinzufügen, die die Zeichenfolge enthält. Ich schlage vor, .filter() zu verwenden:

$(".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>

Answer 4

Sie :contains Wähler zusammen mit den erforderlichen div Selektor verwenden:

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

Working Fiddle

Answer 5

Sie das richtige Element finden in einem Filter:

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

Oder wenn Sie wirklich das erste Elternteil bedeuten, dann benutzen Sie einfach :eq():

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

Answer 6

Gerade first() in Ihrem 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>

Answer 7

Fügen Sie einfach kombinieren, was Sie bereits bekam .

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

vielleicht ist es nicht eine gute Idee, Text zu testen auf, könnte es ändert ...

, um das erste Element einer Reihe von Elementen erhalten Sie folgende Möglichkeiten:

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

oder

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

Answer 8

Ein viel einfacher einfacher Weg ohne Verwendung :contains, .filter() Ist

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

es die erste direkte Nachkomme Spanne unter .sonuc Klasse auswählt und dann durch Verwendung .parent() wählt sich übergeordnete und fügt die Klasse ‚.hobi‘ darin.

Working JSFiddle Demo

---

$('.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>