循環類中的每個Jquery的

我有以下DIV結構：循環類中的每個Jquery的

<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個新的子元素之後？

來源

2017-06-22 Harshal Mahajan

'$（ '是childElement'）'不會迴路單一的時間，其實 –

什麼是'childElement' – brk

有可能很多與問題更錯了也 - 樣，有什麼是'strHtmlNewChildHtml' –

jquery電話$('.childElement')將在呼叫時查看的元素。因此，如果此時您的代碼中有4 .childElement，那麼它將循環4次。

來源

2017-06-22 05:52:17 Aenadon

，所以我需要做出什麼改變才能正確運行它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>

來源

2017-06-22 05:53:20

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>

在這裏，你可以試試這個。

來源

2017-06-22 05:54:11

您的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>

來源

2017-06-22 05:56:15

這是錯字錯誤，更新了問題。 –

運行代碼段警報2次意味着它的工作。 –

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 
 
    }); 
 
});

<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>

您可以指定喜歡這個，試試這個：

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

    // hopefully it works. 

});

還注意到，您的DIV沒有正確關閉。

來源

2017-06-22 05:56:38

實際上它只會運行兩次（如果您按照上面發佈的順序調用這些函數）。
請注意，我修正了您在標記和代碼中的一些拼寫錯誤。

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>

來源

2017-06-22 05:59:34

循環類中的每個Jquery的

回答

相關問題