jQueryが親子の子ulの要素を取得しない

Question

私の問題はこれがトップレベルを変更することですlispan内容。 liが他にulを保持しているときにはspanが見つかりません。私はjQueryのセレクタが私の上位レベルの `div``の下にあるすべての".fancytree-node"要素を取得すると思っていました。

私はjQuery 1.11.1を使用しています。私はセレクタを変更しようと多くの異なるメソッドを使用しようとしましたが、このjQueryステートメントと同じ結果が得られました。

jQueryとHTML：

$(function() { 
 
    $("#treeDestinationFancy .fancytree-icon").each(function() { 
 
    $(this).appendTo($(this).parent()); 
 
    }); 
 

 
    $("#treeDestinationFancy .fancytree-expander").each(function() { 
 
    $(this).appendTo($(this).parent()); 
 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="treeDestinationFancy "> 
 
    <ul> 
 
    <li> 
 
     <span class="fancytree-node fancytree-exp-n fancytree-ico-c"> 
 
    \t \t \t \t <span class="fancytree-title">[Drag here]</span> 
 
     <img class="fancytree-icon" alt="" src="/Images.gif"> 
 
     <span class="fancytree-expander"></span> 
 
     </span> 
 
    </li> 
 
    <li> 
 
     <span class="fancytree-node fancytree-exp-n fancytree-ico-c"> 
 
    \t \t \t \t <span class="fancytree-title">this item</span> 
 
     <img class="fancytree-icon" alt="" src="/Images.gif"> 
 
     <span class="fancytree-expander"></span> 
 
     </span> 
 
    </li> 
 
    <li class="fancytree-lastsib"> 
 
     <span class="fancytree-node fancytree-expanded fancytree-has-children fancytree-lastsib fancytree-exp-el fancytree-ico-e"> 
 
    \t \t \t \t <span class="fancytree-title">Forward</span> 
 
     <img class="fancytree-icon" alt="" src="/Images.gif"> 
 
     <span class="fancytree-expander"></span> 
 
     </span> 
 
     <ul> 
 
     <li> 
 
      <span class="fancytree-node fancytree-exp-n fancytree-ico-c"> 
 
    \t \t \t \t \t \t <span class="fancytree-expander"></span> 
 
      <img class="fancytree-icon" alt="" src="/Images.gif"> 
 
      <span class="fancytree-title">Host with Protocol</span> 
 
      </span> 
 
     </li> 
 
     <li> 
 
      <span class="fancytree-node fancytree-exp-n fancytree-ico-c"> 
 
    \t \t \t \t \t \t <span class="fancytree-expander"></span> 
 
      <img class="fancytree-icon" alt="" src="/Images.gif"> 
 
      <span class="fancytree-title">Audit Guid</span> 
 
      </span> 
 
     </li> 
 
     <li> 
 
      <span class="fancytree-node fancytree-exp-n fancytree-ico-c"> 
 
    \t \t \t \t \t \t <span class="fancytree-expander"></span> 
 
      <img class="fancytree-icon" alt="" src="/Images.gif"> 
 
      <span class="fancytree-title">Contact:Email [InnerText]</span> 
 
      </span> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</div>

Answer 1

私はあなたが何をしようとしていると思っています。各ノードに3つの子を "fancytree-title"、 "fancytree-icon"、 "fancytree-expander"の順に並べるようにします。セレクタを変更して、先祖ノードではなく親ノードから選択するだけです。

$(function() { 
 
    $(".fancytree-node .fancytree-icon").each(function() { 
 
    $(this).appendTo($(this).parent()); 
 
    }); 
 

 
    $(".fancytree-node .fancytree-expander").each(function() { 
 
    $(this).appendTo($(this).parent()); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="treeDestinationFancy "> 
 
    <ul> 
 
    <li> 
 
     <span class="fancytree-node fancytree-exp-n fancytree-ico-c"> 
 
     <span class="fancytree-title">[Drag here]</span> 
 
     <img class="fancytree-icon" alt="" src="/Images.gif"> 
 
     <span class="fancytree-expander"></span> 
 
     </span> 
 
    </li> 
 
    <li> 
 
     <span class="fancytree-node fancytree-exp-n fancytree-ico-c"> 
 
     <span class="fancytree-title">this item</span> 
 
     <img class="fancytree-icon" alt="" src="/Images.gif"> 
 
     <span class="fancytree-expander"></span> 
 
     </span> 
 
    </li> 
 
    <li class="fancytree-lastsib"> 
 
     <span class="fancytree-node fancytree-expanded fancytree-has-children fancytree-lastsib fancytree-exp-el fancytree-ico-e"> 
 
     <span class="fancytree-title">Forward</span> 
 
     <img class="fancytree-icon" alt="" src="/Images.gif"> 
 
     <span class="fancytree-expander"></span> 
 
     </span> 
 
     <ul> 
 
     <li> 
 
      <span class="fancytree-node fancytree-exp-n fancytree-ico-c"> 
 
      <span class="fancytree-expander"></span> 
 
      <img class="fancytree-icon" alt="" src="/Images.gif"> 
 
      <span class="fancytree-title">Host with Protocol</span> 
 
      </span> 
 
     </li> 
 
     <li> 
 
      <span class="fancytree-node fancytree-exp-n fancytree-ico-c"> 
 
      <span class="fancytree-expander"></span> 
 
      <img class="fancytree-icon" alt="" src="/Images.gif"> 
 
      <span class="fancytree-title">Audit Guid</span> 
 
      </span> 
 
     </li> 
 
     <li> 
 
      <span class="fancytree-node fancytree-exp-n fancytree-ico-c"> 
 
      <span class="fancytree-expander"></span> 
 
      <img class="fancytree-icon" alt="" src="/Images.gif"> 
 
      <span class="fancytree-title">Contact:Email [InnerText]</span> 
 
      </span> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</div>

Answer 2

ok.Iはあなたの問題を得ました。 LIを使ってすべての内側のULをラップする必要があります。私は以下のアップデートコードを持っています。これはうまくいきます。確認してください。

<div id="treeDestinationFancy"> 
    <ul> 
     <li> 
      <span class="fancytree-node fancytree-exp-n fancytree-ico-c"> 
       <span class="fancytree-title">[Drag here]</span> 
       <img class="fancytree-icon" alt="" src="/Images.gif"> 
       <span class="fancytree-expander"></span> 
      </span> 
     </li> 
     <li> 
      <span class="fancytree-node fancytree-exp-n fancytree-ico-c"> 
       <span class="fancytree-title">this item</span> 
       <img class="fancytree-icon" alt="" src="/Images.gif"> 
       <span class="fancytree-expander"></span> 
      </span> 
     </li> 
     <li class="fancytree-lastsib"> 
      <span class="fancytree-node fancytree-expanded fancytree-has-children fancytree-lastsib fancytree-exp-el fancytree-ico-e"> 
       <span class="fancytree-title">Forward</span> 
       <img class="fancytree-icon" alt="" src="/Images.gif"> 
       <span class="fancytree-expander"></span> 
      </span> 
      <li> 
      <ul> 
       <li> 
        <span class="fancytree-node fancytree-exp-n fancytree-ico-c"> 
         <span class="fancytree-expander"></span> 
         <img class="fancytree-icon" alt="" src="/Images.gif"> 
         <span class="fancytree-title">Host with Protocol</span> 
        </span> 
       </li> 
       <li> 
        <span class="fancytree-node fancytree-exp-n fancytree-ico-c"> 
         <span class="fancytree-expander"></span> 
         <img class="fancytree-icon" alt="" src="/Images.gif"> 
         <span class="fancytree-title">Audit Guid</span> 
        </span> 
       </li> 
       <li> 
        <span class="fancytree-node fancytree-exp-n fancytree-ico-c"> 
         <span class="fancytree-expander"></span> 
         <img class="fancytree-icon" alt="" src="/Images.gif"> 
         <span class="fancytree-title">Contact:Email [InnerText]</span> 
        </span> 
       </li> 
      </ul> 
     </li> 
     </li> 
    </ul> 
</div>