1. 首頁
  2. 問答
  3. jQuery每個沒有獲取子元素ul的父元素li

jQuery每個沒有獲取子元素ul的父元素li

2016-10-28 175 views
0

我的問題是這個修改頂級lispan內容。當li持有另一個ul裏面沒有找到那些span之內。我認爲jQuery選擇器會讓我在我的高級`div`下的所有".fancytree-node"元素。jQuery每個沒有獲取子元素ul的父元素li

我正在使用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>

來源

2016-10-28 Naomarius

+0

您可以定義例如，對於HTML輸出，美想要的嗎？你的意思是你想讓所有'.fancytree-node'出來到＃＃treeDestinationFancy' –

+0

你會看到最頂層的li元素與最後一個li元素中的跨度是不同的嗎？我只是試圖翻轉那個孩子ul內的跨度的位置。 – Naomarius

回答

1

我想我正在看你想要做什麼。你希望每個節點按照「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>

來源

2016-10-28 20:18:08

+0

這是行不通的，但我在同一頁面上使用了第二個樹視圖，並且它對此做了同樣的事情，而且我需要一次只生成一棵樹。你是對的，但是我怎麼把選擇器一次只限制在一棵樹上呢？ – Naomarius

+0

再次檢查我的實際代碼是有點不同，但在我的環境中這不起作用。我可能有衝突，我只是不知道在哪裏。 – Naomarius

+0

但是，這確實適用於您在問題中提供的代碼，對吧？如果您對不同的代碼有不同的問題，請分開提問。 –

0

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>

來源

2016-10-28 18:23:01

+0

這是一個輕微的複製麪食錯誤我的壞。但即使有了這個空間，我仍然無法使它在最後一個主要內容的ul列表下打任何節點。 – Naomarius

+0

我按照您的擔憂編輯了代碼。現在工作正常。您必須用LI包裝每個內部UL –

+0

「li」不能包含另一個「li」。 'li'應該包裝'ul'。所有這些代碼的作用是改變層次結構，以便第二個'ul'現在處於'li class =「fancytree-lastsib」' –

相關問題

 相關問題