在頁面上應用更改。 jQuery的

Question

我對jQuery幾行代碼來操作HTML

$('#Remarks li:gt(1)').wrapAll('<ul class="btmRow" />'); 
$("#btRowMargin").appendTo("#Remarks"); 
$('#Remarks ul:lt(2)').wrapAll('<li class="btmRow" />'); 

我想上面的代碼，以跨在以往任何時候#Remarks存在的頁面效果。對於我寫的

$.each($("#Remarks"), function() { 
    $('#Remarks li:gt(1)').wrapAll('<ul class="btmRow" />'); 
    $("#btRowMargin").appendTo("#Remarks "); 
    $('#Remarks ul:lt(2)').wrapAll('<li class="btmRow" />'); 
}); 

但它似乎並沒有工作。

JSfiddle here

本來HTML看起來像這樣

<li> 
    <ul id="Remarks" class="Remarks"> 
     <li class="Header soldBKG">Showing Information</li> 
     <li><p><b>Remarks:</b></p></li> 
     <li><span>Occupant Name</span><span class="data">Listing Office</span></li> 
     <li><span>Occupancy/Show</span><span class="data">Listing Agent</span></li> 
     <li><span>Occupant Type</span><span class="data">N/A</span></li> 
     <li><span>Occupant Phone</span><span class="data">N/A</span></li> 
     <li><span>Other Phone Number</span><span class="data">N/A</span></li> 

    </ul> 
    <ul class="btmRow MarginFix" id="btmRowMarginFix"> 
     <li></li> 
     <li><span>Phone To Show</span><span class="data">N/A</span></li> 
     <li><span>LockBox Location</span><span class="data">N/A</span></li> 
     <li><span>LockBox Type</span><span class="data">N/A</span></li> 
     <li><span>Showing Access</span><span class="data">N/A</span></li> 
    </ul> 
    </li> 

應用了jQuery的HTML看起來像後：

<li> 
    <ul id="Remarks" class="Remarks"> 
     <li class="Header soldBKG">Showing Information</li> 
     <li><p><b>Remarks:</b></p></li> 
     <li class="btmRow"> 
     <ul class="btmRow"> 
      <li><span>Occupant Name</span><span class="data">Listing Office</span></li> 
      <li><span>Occupancy/Show</span><span class="data">Listing Agent</span></li> 
      <li><span>Occupant Type</span><span class="data">N/A</span></li> 
      <li><span>Occupant Phone</span><span class="data">N/A</span></li> 
      <li><span>Other Phone Number</span><span class="data">N/A</span></li> 
     </ul> 
     </li> 
    </ul> 
    <ul class="btmRow MarginFix" id="btmRowMarginFix"> 
     <li></li> 
     <li><span>Phone To Show</span><span class="data">N/A</span></li> 
     <li><span>LockBox Location</span><span class="data">N/A</span></li> 
     <li><span>LockBox Type</span><span class="data">N/A</span></li> 
     <li><span>Showing Access</span><span class="data">N/A</span></li> 
    </ul> 
    </li> 

不過，我想是這樣的：

<li> 
    <ul id="Remarks" class="Remarks"> 
     <li class="Header soldBKG">Showing Information</li> 
     <li><p><b>Remarks:</b></p></li> 
     <li class="btmRow"> 
     <ul class="btmRow"> 
      <li><span>Occupant Name</span><span class="data">Listing Office</span></li> 
      <li><span>Occupancy/Show</span><span class="data">Listing Agent</span></li> 
      <li><span>Occupant Type</span><span class="data">N/A</span></li> 
      <li><span>Occupant Phone</span><span class="data">N/A</span></li> 
      <li><span>Other Phone Number</span><span class="data">N/A</span></li> 
     </ul> 

     <ul class="btmRow MarginFix" id="btmRowMarginFix"> 
      <li></li> 
      <li><span>Phone To Show</span><span class="data">N/A</span></li> 
      <li><span>LockBox Location</span><span class="data">N/A</span></li> 
      <li><span>LockBox Type</span><span class="data">N/A</span></li> 
      <li><span>Showing Access</span><span class="data">N/A</span></li> 
     </ul> 
     </li> 
    </ul> 

    </li> 

Answer 1

好的，在這裏聽聽你的錯誤。

1： Id必須是唯一的，所以當你有一個jQuery選擇器$('#Remarks')時，它只返回1個元素。沒有在每個循環。用class改變你的id會形成一個循環。

附註：當通過jQuery元素循環時，可以使用.each()這樣的：$(selector).each(function(){})。你現在使用它的方式是數組或對象。

2：的.each()裏面，你需要使用這個，否則你都重新選擇的每一個元素，沒有 「真正的CONTROLE」：

$('.Remarks').each(function(){ 
    var $this = $(this) //Caching the object for optimisation 
    $this.find('li:gt(1)').wrapAll('<ul class="btmRow" />'); 
    //this line has to change, see point 3 
    $this.find('ul:lt(2)').wrapAll('<li class="btmRow" />'); 
}) 

3：這是一個猜測，但是這line：

$("#btRowMargin").appendTo('#Remarks'); 

可能會改變。您很可能需要使用一些DOM遍歷函數，但由於我們無法訪問您的DOM，因此我無法告訴您。但它會以.appendTo($this)完成。

$this.siblings('.bottomRow.MarginFix').appendTo($this.find('li :eq(2)')); 

Answer 2

將其更改爲類，而不是一個ID ..

由於id應該是一個HTML頁面上是獨一無二的。

然後使用this上下文適用於迭代

$(".Remarks").each(function() { 
    $('li:gt(1)', this).wrapAll('<ul class="btmRow" />'); 
    $("#btRowMargin").appendTo(this); 
    $('ul:lt(2)', this).wrapAll('<li class="btmRow" />'); 
}); 

這些更改只是當前元素同樣，如果id爲btRowMargin元素是在多個地方替換帶班並使用this背景爲以及。