0

我有这些 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在这里

最初的 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>
4

2 回答 2

2

将其更改为类而不是id ..

在idHTML 页面上应该是唯一的。

然后使用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上下文。

于 2013-07-03T17:34:47.180 回答
1

好的，这里列出你的错误。

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)'));
于 2013-07-03T17:40:49.127 回答