jquery嵌套列表,选择所有li后跟ul

时间:2013-10-17 00:44:23

标签: jquery jquery-selectors nested-lists

我在解决嵌套无序列表的特定选择器时遇到了问题。

我正在尝试仅在后跟ul

时添加到所有li

我是jquery的新手,非常感谢你的帮助。

我试过这个可能完全错误,因为我正在寻找任何一个href标签。

$("#sidebar ul").each(function()
{
if($(this).has("ul li").next('ul').length)
{
$(this).find('a').before("<span class='my_span'></span>");
}
})

预期输出http://jsfiddle.net/7JdEh/ 添加一个范围(“需要”类)到任何li,然后是ul

这是减价。

    <div id="sidebar">
  <ul>
  <li id="pagenav">
     <h2>Pages</h2>
     <ul>
        <li class="page_item">
           <a href="http://www.examplesite.com/wordpress/?page_id=2"
              title="About Us">About Us</a>
        </li>
        <li class="page_item">
           <a href="http://www.examplesite.com/wordpress/?page_id=4"
              title="Contact">Contact</a>
        </li>
        <li class="page_item">
           <a href="http://www.examplesite.com/wordpress/?page_id=8"
              title="Site Map">Site Map</a>
        </li>
     </ul>
  </li>
  <li>
     <h2>Archives</h2>
     <ul>
        <li><a href='http://www.examplesite.com/wordpress/?m=200502'
           title='February 2005'>February 2005</a></li>
        <li><a href='http://www.examplesite.com/wordpress/?m=200501'
           title='January 2005'>January 2005</a></li>
        <li><a href='http://www.examplesite.com/wordpress/?m=200412'
           title='December 2004'>December 2004</a></li>
          <li> 
        <ul>
           <li><a href="http://www.examplesite.com/wordpress/?cat=47"
              title="Stories of our life">Stories</a></li>
           <li><a href="http://www.examplesite.com/wordpress/?cat=48"
              title="Computer Tips">Computer Tips</a></li>
           <li><a href="http://www.examplesite.com/wordpress/?cat=6"
              title="WordPress Tips">WordPress Tips</a></li>
           <li><a href="http://www.examplesite.com/wordpress/?cat=28"
              title="Web Page Design Advice">Web Page Design</a></li>
        </ul>
        </li>
        <li><a href='http://www.examplesite.com/wordpress/?m=200411'
           title='November 2004'>November 2004</a></li>
     </ul>
  </li>
  <li>
     <h2>Categories</h2>
     <ul>
        <li><a href="http://www.examplesite.com/wordpress/?cat=47"
           title="Stories of our life">Stories</a></li>
        <li><a href="http://www.examplesite.com/wordpress/?cat=48"
           title="Computer Tips">Computer Tips</a></li>
        <li><a href="http://www.examplesite.com/wordpress/?cat=6"
           title="WordPress Tips">WordPress Tips</a></li>
           <li>
        <ul>
           <li><a href="http://www.examplesite.com/wordpress/?cat=47"
              title="Stories of our life">Stories</a></li>
           <li><a href="http://www.examplesite.com/wordpress/?cat=48"
              title="Computer Tips">Computer Tips</a></li>
           <li><a href="http://www.examplesite.com/wordpress/?cat=6"
              title="WordPress Tips">WordPress Tips</a></li>
           <li><a href="http://www.examplesite.com/wordpress/?cat=28"
              title="Web Page Design Advice">Web Page Design</a></li>
        </ul>
        </li>
        <li><a href="http://www.examplesite.com/wordpress/?cat=28"
           title="Web Page Design Advice">Web Page Design</a></li>
     </ul>
    </li>
   </ul>
   </div>

由于

1 个答案:

答案 0 :(得分:0)

这两个应该可以胜任。

$("ul > li"), and or just $("li").   

Could also do $('ul').find('li').each(function(){
  //code here
});