添加不同種類的使用jQuery

我有不同程度的深度的名單列表項的父母：添加不同種類的使用jQuery

<ul> 
    <li>Item 1</li> 
    <li>Item 2 
    <ul class="sub-menu"> 
     <li>Sub item 1</li> 
     <li>Sub item 2</li> 
     <li>Sub item 3 
     <ul class="sub-menu"> 
      <li>Subsub item 1</li> 
      <li>Subsub item 2</li> 
     </ul> 
     </li> 
     <li>Sub item 4</li> 
    </ul> 
    </li> 
    <li>Item 3</li> 
</ul>

我使用下面的jQuery腳本添加一個類家長：

$("ul li ul").parent().addClass("menuparent");

有沒有辦法將這個類只添加到頂級父li的和其他所有（更深）父li的不同類？

來源

2012-09-25 user18577

你知道可能含有頂層'一個id ul'作爲嫡系？ – Shmiddty

你的HTML有一個錯誤，你知道嗎？最裏面的UL不包含在LI中。 – David

哎呀，謝謝，我修改了。不，沒有頂級ID - 它是一個WordPress網站，WP不添加一個。 – user18577

下面是做到這一點的方法之一。

$("ul li ul").parent().addClass("otherclass"); 
$("ul li >ul").parent().removeClass("otherclass").addClass("menuparent");

http://jsfiddle.net/MdBa5/

來源

2012-09-25 16:06:33

謝謝你。上面的標記（現在已經更正）存在一個小錯誤，所以這不起作用，但是我發現了一些非常相似的東西： '$（「ul.sub-menu」）。parent（）。 addClass（'parent'）;'和'$（「ul.sub-menu ul.sub-menu」）。parent（）。addClass（'deeperlevels'）。removeClass（'parent'）;' – user18577

你可以運行一個最接近的檢查，看看是否有任何父母是李。

if ($element.closest("li").length === 0) { 
    $element.addClass("topLvl"); 
} else { 
    $element.addClass("innerLvl"); 
}

來源

2012-09-25 15:57:30 jholloman

嘗試：

$("ul:first>li").addClass("menuparent") 
    .find('li>ul').parent().addClass('otherparent');

http://jsfiddle.net/3UcdM/

來源

2012-09-25 16:10:44 David

這裏有一個遞歸解決方案：

function markNestedLists(par, level){ 
    par.addClass("level-" + level); 

    par.children("li").children("ul").each(function(){ 
     markNestedLists($(this), level + 1); 
    });  
} 
markNestedLists($("ul").first(), 1);

http://jsfiddle.net/h9xvY/1/

如果你知道最上面的UL的父的ID，你可以使用它像這樣：

markNestedLists($("#myParent > ul"), 1);

來源

2012-09-25 16:17:39 Shmiddty

根據你想要的類的名字什麼的話，我會使用這樣的：

$(function(){ 
    $('ul li').addClass(function(){ 
     return 'depth-' + $(this).parents('ul').length;    
    });   
});

這裏你可以看到一個工作示例：http://jsfiddle.net/russelluresti/3peCS/

如果你想特殊的類名，而不是數量的增加，你必須運行一個switch語句。但是這個概念是一樣的。使用addClass中的函數來確定深度（使用parents()）並返回相應的值。

來源

2012-09-25 16:22:20 RussellUresti

它發生在我身上你可能只想要在有孩子的李的班上。我修改了這個例子來包含一個測試孩子ul的三元語句：http://jsfiddle.net/russelluresti/3peCS/1/ – RussellUresti

理想情況下，有一些絕對參考，如最上面的ul唯一的ID或其他可搜索屬性，但您可以解決該問題。無論哪種方式，重要的是子選擇器：>而不是隱式後代選擇器。它會指定你只想找到ul的這個頂層元素以下的層次。

時，在你的基地的情況下，可以使用：

$("ul li ul").parent()

你得到所有ul的是任何後代（子女，孫子，曾孫......）的任何li其後代任何ul's。相反，你會使用：

$("ul#topmost > li > ul").parent()

它可以讓你只ul是一個li的孩子是在樹的頂部的具體ul的孩子。

如果你沒有爲樹頂部的ID或其他明確的選擇，頂級ul本身必須是A div或body或一些其他塊級元素的一個孩子。所以，你可以清楚而明確地得到你想要的僅僅通過增加頂級ul的是父層次：

$("body > ul > li > ul").parent()

另外：我忘了，你也希望能夠選擇其他家長li的這些不是由上面的選擇器捕獲的。你可以這樣做，使用:not選擇，或JQuery的.not()方法，像這樣：

$("li>ul:not(body > ul > li > ul)").parent()

要兩行合併爲一個，你會先deeperParent類添加到所有這些li的，然後篩選頂級的父母，並分配menuParent只有在那裏：

$("li>ul").parent().addClass('deeperParent').filter('body > ul > li'). 
    removeClass('deeperParent').addClass('menuParent')

來源

2012-09-25 17:07:34 XML

添加不同種類的使用jQuery

回答

相關問題