Question

我有以下DIV结构：

<div id='mainDiv'>
  <div id='childDiv1' class='childElement'>Content1<div>
  <div id='childDiv2' class='childElement'>Content2<div>
</div>

在我的一个Jquery操作中，我正在删除所有内容的 mainDiv

 strHtmlNewChildHtml = '<div id='childDiv1' class='childElement'>New Content1<div><div id='childDiv2' class='childElement'>New Content2</div>';

 $("#mainDiv").html(''); 
 $("#mainDiv").html(strHtmlNewChildHtml);

并使用循环类名称添加New Html。

$('.childElement').each( function() {
//It is looping 4 times while new HTML having only 2 divs
 });

我的问题：我已经删除了旧的2个子元素，并在循环运行4次后添加了2个新的子元素？

Answer 1

jquery call $('.childElement')将在调用时查看元素。因此，如果此时您的代码中有4 .childElement s，那么它将循环4次。

Answer 2

看起来你的strHtmlNewChildHtml有错误的html结构。我只是按预期的两个循环修改它。

 strHtmlNewChildHtml = "<div id='childDiv1' class='childElement'>New Content1</div><div id='childDiv2' class='childElement'>New Content2</div>";

 $("#mainDiv").html(''); 
 $("#mainDiv").html(strHtmlNewChildHtml);
$('.childElement').each( function() {
console.log("start");

console.log($(this).html());
console.log("end");

//It is looping 4 times while new HTML having only 2 divs
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='mainDiv'>
  <div id='childDiv1' class='childElement'>Content1<div>
  <div id='childDiv2' class='childElement'>Content2<div>
</div>

Answer 3

strHtmlNewChildHtml = "<div id='childDiv1' class='childElement'>New Contentx<div><div id='childDiv2' class='childElement'>New Contenty<div>";

$("#mainDiv").html(''); 
$("#mainDiv").html(strHtmlNewChildHtml);
 
$('.childElement').each(function(i){
   console.log(i); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='mainDiv'>
  <div id='childDiv1' class='childElement'>Content1<div>
  <div id='childDiv2' class='childElement'>Content2<div>
</div>

在这里你可以试试这个。

Answer 4

你的div没有正确关闭。

var strHtmlNewChildHtml = "<div id='childDiv1 ' class='childElement '>New Content1</div><div id='childDiv2 ' class='childElement '>New Content2</div>";

$("#mainDiv").html('');
$("#mainDiv").html(strHtmlNewChildHtml);

$('.childElement').each(function(index, item) {
  alert(index);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='mainDiv'>
  <div id='childDiv1' class='childElement'>Content1
  </div>
  <div id='childDiv2' class='childElement'>Content2
  </div>
</div>

Answer 5

＆＃13;

var strHtmlNewChildHtml = "<div id='childDiv1' class='childElement'>New Content1<div><div id='childDiv2' class='childElement'>New Content2<div>";

$(document).ready(function(){
  $("#mainDiv").html(''); 
  $("#mainDiv").html(strHtmlNewChildHtml);
 
  $('.childElement').each( function() {
    alert('loop_check');
    //It is looping 4 times while new HTML having only 2 divs
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id='mainDiv'>
  <div id='childDiv1' class='childElement'>Content1</div>
  <div id='childDiv2' class='childElement'>Content2</div>
</div>

＆＃13;

您可以这样指定，试试这个：

$('#mainDiv').children('.childElement').each( function() {

   // hopefully it works.

});

还注意到你的div没有正确关闭。

Answer 6

实际上它只会运行两次（如果按照上面发布的顺序调用这些功能）请注意，我修复了标记和代码中的错误。

strHtmlNewChildHtml = '<div id="childDiv1" class="childElement">New Content1</div><div id="childDiv2" class="childElement">New Content2</div>';

 $("#mainDiv").html(''); 
 $("#mainDiv").html(strHtmlNewChildHtml);
 
 $('.childElement').each( function(index,element) {
  //It is NOT looping 4 times while new HTML having only 2 divs
  // It is looping twice!
  console.log('iteration ' + index);
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='mainDiv'>
  <div id='childDiv1' class='childElement'>Content1<div>
  <div id='childDiv2' class='childElement'>Content2<div>
</div>

在每个Jquery中循环该类

6 个答案: