Question

我在Creating dropdown menu from simple list

获取代码

  <ul id="menu">
      <li><a href="#">Menu 1</a></li>
      <li><a href="#">Menu 2</a></li>
      <li><a href="#">_Submenu x</a></li>
      <li><a href="#">_Submenu y</a></li>
      <li><a href="#">Menu 3</a></li>
 </ul>

我尝试添加类li包装器ul，已添加

var prev;
$('#nav li').each(function(){
    if(/^_/.test (this.textContent) && prev){
        prev.appendChild(this);
        $("#nav ul li ul").prev().addClass("sub-icon");
        $("#nav ul li ul li a").each(function(){
        $(this).text($(this).text().replace (/[_]/,""))
        })
    }else{
        prev = this.appendChild($('<ul class ="sub-nav">')[0]);
    }
}).find('ul:empty').remove();

并生成html结构如下：

  <ul id="nav">
      <li><a class="sub-icon" href="#">Menu 1</a></li>
      <li><a class="sub-icon" href="#">Menu 2</a>
         <ul>
            <li><a href="#">Submenu x</a></li>
            <li><a href="#">Submenu y</a></li>
         </ul>
      </li>
      <li><a class="sub-icon" href="#">Menu 3</a></li>
 </ul>

如何生成这样的结构，只需添加一个类子图标

 <ul id="nav">
      <li><a href="#">Menu 1</a></li>
      <li><a class="sub-icon" href="#">Menu 2</a>
         <ul>
            <li><a href="#">Submenu x</a></li>
            <li><a href="#">Submenu y</a></li>
         </ul>
      </li>
      <li><a href="#">Menu 3</a></li>
 </ul>

感谢您的帮助。

Answer 1

因此，您希望在包含ul的{{1}}中添加一个类...

尝试：

$("#nav ul li ul").parent("li").addClass("sub-icon");

Answer 2

我会以不同的方式通过过滤sub并首先修改它们的文本来解决这个问题。然后循环遍历sub并附加到sub <ul>（如果已存在）或添加它（如果它不是

＆＃13;

// filter out the sub menu items and remove the `_`
var $subs = $('#nav li').filter(function(){
  var $link = $(this).find('a'),
  txt = $link.text(),
  isSub = txt[0]==='_';
  if(isSub){
    $link.text(txt.slice(1))
  }
  return isSub;  
});
// loop over sub menu items
$subs.each(function(){
  var $prev = $(this).prev(),
    $prevUl = $prev.find('ul');
  if(!$prevUl.length){
    // if prev `<li>` doesn't have sub `<ul>` add it and add the link class
    $prevUl = $('<ul>').appendTo($prev);
    $prev.find('a').addClass('sub-icon')
  }
  $prevUl.append(this);
  
})

＆＃13;

a.sub-icon{color:red}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="nav">
      <li><a href="#">Menu 1</a></li>
      <li><a href="#">Menu 2</a></li>
      <li><a href="#">_Submenu x</a></li>
      <li><a href="#">_Submenu y</a></li>
      <li><a href="#">Menu 3</a></li>
 </ul>

＆＃13;

如何addClass li包装ul

2 个答案: