Loop на каждом h2 тега внутри DIV

Question

У меня есть структура вроде этого:

<div class="document-content" contenteditable="true"> 
<h2>Heading 1</h2> 
<p>Content</p> 
<h2>Heading 2</h2> 
<p>Content</p> 
</div> 

Как мне петлю на каждой из h2 тегов внутри этого DIV?

Лучшее, что я мог сделать, чтобы найти только одну из h2 тегов:

$('.document-content').find('h2').html() 

Мне нужно найти все, так что я могу делать такие вещи, как добавить классы или идентификаторы для каждого из них.

Answer 1

Вы можете использовать each() функцию:

$('.document-content').find('h2').each(function() { 
 
    var that = $(this); 
 
    that.addClass('custom-class'); 
 
    // more code here.. 
 
    // that.find('.another-element').addClass('test'); 
 
});

.custom-class { 
 
    color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="document-content" contenteditable="true"> 
 
<h2>Heading 1</h2> 
 
<p>Content</p> 
 
<h2>Heading 2</h2> 
 
<p>Content</p> 
 
</div>

Answer 2

(IMO) Вам не нужна функция find(). Вы можете использовать это (в сочетании с each())

$('.document-content h2').each(function() { 
    $(this).css('color', 'red'); 
}); 

Также проверьте этот JSFiddle

Answer 3

Без использования .find()

$('.document-content>h2').each(function() { 
 
    var that = $(this); 
 
    that.addClass('custom-class'); 
 
});

.custom-class { 
 
    color: blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="document-content" contenteditable="true"> 
 
    <h2>Heading 1</h2> 
 
    <p>Content</p> 
 
    <h2>Heading 2</h2> 
 
    <p>Content</p> 
 
</div>

Answer 4

Вы должны каждый h2 тег в document-content, так что вам нужно перебирать каждый тег h2 с помощью функции jQuery, чтобы найти все теги h2 и addClass.

$("div.document-content").find("h2").each(function(){ 
    $(this).addClass("your_class"); 
}); 

Answer 5

Мне нужно найти все, так что я могу делать такие вещи, как добавить классы или идентификаторы для каждого из них.

Здесь нет необходимости в .each() здесь, как сказано в других ответах. .html() возвращает содержимое HTML первого элемента в наборе. Однако, такие вещи, как .addClass('myClass'), будут относиться к всем элементам в комплекте. Таким образом, чтобы добавить .myClass их все, вы можете сделать:

$('.document-content h2').addClass('myClass') 

(По this answer, .find() не является действительно необходимым.)