循环div中的每个h2标记

Question

我有一个这样的结构：

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

如何在该div中的每个h2标记上循环？

我能做的最好的事情就是只找到一个h2标签：

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

我需要找到所有的，这样我就可以做一些事情，比如为每个类添加类或ID。

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

不使用.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 3

我需要找到所有的，这样我就可以做一些事情，比如为每个类添加类或ID。

正如其他答案所说，您甚至不需要.each()。.html()返回集合中第一个元素的HTML内容。但是，类似.addClass('myClass')的内容将应用于集合中的所有元素。因此，要将.myClass添加到它们中，可以执行以下操作：

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

（根据这个答案，.find()不是真正必要的。）

Answer 4

（imo）您不需要find()函数。您可以使用此（与each()结合使用）

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

同时检查此JSFiddle

Answer 5

您需要document-content类中的每个h2标记，因此您需要使用jQuery的.each()函数迭代每个h2标记，以查找所有h2标记并向其添加class。

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