0

HTMLを操作するためのJqueryコードのこれらの行があります

$('#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 つの要素のみが返されます。それぞれにループはありません。クラスで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 に答える