Подтвердить что ты не робот

Найти первого родителя и добавить класс через jQuery

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. Но я хочу добавить только родительский div text1. Как я могу это исправить?

4b9b3361

Ответ 1

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

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

Ответ 2

Вы можете использовать селектор :contains и необходимый селектор div:

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

Рабочая скрипта

Ответ 3

jquery selector : 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>

Ответ 4

Вы можете найти правильный элемент в одном фильтре:

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

Или, если вы действительно имеете в виду первого родителя, просто используйте :eq():

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

Ответ 5

Вы пытаетесь найти родителя sonuc, но добавьте класс только к sonuc

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

Ответ 6

Просто добавьте first() в свой 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>

Ответ 7

Просто объедините все, что у вас уже есть.

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

может быть, это не очень хорошая идея, чтобы протестировать текст, это может измениться...

чтобы получить первый элемент набора элементов, который вы можете:

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

или

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

Ответ 8

Более простой прямой путь без использования :contains, .filter() есть,

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

Он выбирает первый прямой потомок потомка под классом .sonuc, а затем с помощью .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>