使用<a>標籤的內容設置與jQuery李類

Question

我有一個簡單的下拉菜單：

<ul id="nav" > 
<li><a href='/'>Parent One</a> 
<ul> 
<li><a href='/'>child</a></li> 
<li><a href='/'>child</a></li> 
<li><a href='/'>child</a></li> 
</ul> 
</li> 
<li><a href='/'>Parent Two</a> 
<ul> 
<li><a href='/'>child</a></li> 
<li><a href='/'>child</a></li> 
<li><a href='/'>child</a></li> 
</ul> 
</li> 

我需要一個類分配給< LI>父標籤等於到< a>標記中的父項名稱。

<ul id="nav" > 
<li class="ParentOne"><a href='/'>ParentOne</a> 
<ul> 
<li><a href='/'>child</a></li> 
<li><a href='/'>child</a></li> 
<li><a href='/'>child</a></li> 
</ul> 
</li> 
<li class="ParentTwo"><a href='/'>ParentTwo</a> 
<ul> 
<li><a href='/'>child</a></li> 
<li><a href='/'>child</a></li> 
<li><a href='/'>child</a></li> 
</ul> 
</li> 

我試過這段代碼：

<script language="javascript" type="text/javascript"> 
$('#navigation ul li a').each(function(index) { 
var link = $(this); 
$('li', link.parent()).addClass(link.text()); 
}); 
</script> 

但該類適用於兒童的< li>標籤，而不是父母< LI> - 任何幫助，將不勝感激。謝謝！

Answer 1

試試這個：

$(document).ready(function(){ 
    $('#nav>li>a').each(function(){ 
     $(this).parent().addClass($(this).text().replace(/\s/,'')) 
    }); 
}); 

:)

編輯：不思...... OMG ......修復:)

編輯2：新增白色-space修剪。

編輯3：編輯，添加$的document.ready，100％的空白修剪工作;）

Answer 2

這應做到：

$(document).ready(function() { 
    $('#nav > li > a').each(function(index) { 
     $(this).parent().addClass($(this).text()); 
    }); 
}); 

，也將只作用於頂層li元素;以防將類添加到其他更深的嵌套元素。

Answer 3

$('#nav > li > a').each(function(){ 
    $(this).parent().addClass($(this).text().replace(/\s/, '')); 
}); 

Answer 4

這工作：

$("#nav li").each(function() { 
    $(this).addClass($(this).children("a").text()); 
});