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

将其更改为类，而不是 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" />');
});

同样，如果标识为btRowMargin的元素位于多个位置，则将其替换为类，并为此使用this上下文。

Answer 2

好的，这里有你的错误。

1： ID必须是唯一的，因此当您拥有jQuery选择器$('#Remarks')时，它只返回1个元素。每个都没有循环。用class改变你的id将会循环。

旁注：循环浏览jquery元素时，您可以使用.each()：$(selector).each(function(){})。现在使用它的方式是数组或对象。

2：在.each()内，您需要使用此功能，否则您将重新选择每个元素并且没有“真正的控制”：

$('.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：这是一个猜测，但这一行：

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

可能需要改变。您可能需要使用一些DOM遍历功能，但我不能告诉您什么，因为我们无法访问您的DOM。但它将以.appendTo($this)完成。

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

在整个页面中应用更改。 jQuery的

2 个答案: