遍历列表，从列表项文本中添加列表项 id答案

【问题标题】：Iterate through list, add list item id from list item text遍历列表，从列表项文本中添加列表项 id
【发布时间】：2015-04-21 06:57:55
【问题描述】：

我希望找到一个简单的 jQuery 解决方案来遍历列表的子选择器，在这种情况下，ul > li 跨越子选择器，查找文本，将文本复制为列表项 ID，同时删除空格如果有，则用下划线替换（例如，在下面的示例中，HR 区域将变为 HR_Area，然后作为列表项 ID 添加为 li id="HR_Area"）。

<ul id="menu">
<li><a href="/"><span class="additional-background"><span class="menu-item">Staff</span></span></a>
    <ul>
        <li><a href="directory.asp">Directory</a></li>
    </ul>
 </li>
 <li><a href="/"><span class="additional-background"><span class="menu-item">HR Area</span></span></a>
    <ul>
        <li><a href="vacation.asp">Manage Vacation Time</a></li>
    </ul>
 </li>
</ul>

提前致谢。

【问题讨论】：

您的 html 标记不正确。
抱歉，我确实更改了第二个子选择器以包含跨度
你想只为 span 做还是要锚定？
只是想获取 ul > li >a> span > span 文本并将其放置为 ul > li ID（这有意义吗？希望如此:)

标签： javascript jquery html iteration

【解决方案1】：

这将只选择#menu 内的直接li。我希望这是你所期望的。

$(document).ready(function() {
  $("#menu>li .menu-item").each(function() {
    $(this).closest("li").attr("id", $(this).text().split(' ').join('_'));

  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="menu">
  <li>
    <a href="/">
      <span class="additional-background">
                <span class="menu-item">Staff</span>
      </span>
    </a>
    <ul>
      <li><a href="directory.asp">Directory</a>
      </li>
    </ul>
  </li>
  <li>
    <a href="/">
      <span class="additional-background">
                <span class="menu-item">HR Area</span>
      </span>
    </a>
    <ul>
      <li><a href="vacation.asp">Manage Vacation Time</a>
      </li>
    </ul>
  </li>
</ul>

【讨论】：

嗨 Roshan，这两种方法都有效，但您的方法似乎使用的代码更少，非常感谢！

【解决方案2】：

只需遍历一个 li 的直接子代。然后访问 span 并用下划线替换空格并相应地设置 id。

// Iterate over the immediate li elements for the ul

$('#menu > li').each(function(elem) {
    var $this = $(this);
    // Access the span element
    var $span = $('.menu-item', $this),
        spanText = $span.text(),
        // Replace space with underscore
        replacedText = spanText.split(' ').join('_');

    //  Set the id of for the li element
    $this.attr('id', replacedText);

});

$('#menu > li').each(function(elem) {
    console.log($(this).attr('id'));
});

Check Fiddle

【讨论】：

看起来很棒！例如，一个问题（我知道它不在原始帖子的代码中）嵌套的无序列表（#menu > li > ul > li）可能具有相同的跨度类，如何避免也选择这些？

【解决方案3】：

试试这个：-

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function(){
$("#menu").find("li").each(function(){
  $(this).find("span").each(function(){
    var txt = $(this).html();
    txt = txt.replace(" ","_");
    $(this).closest("li").attr("ID",txt);
  });
});
});
</script>

</head>
<body>

<ul id="menu">
<li><a href="/"><span class="additional-background"><span class="menu-item">Staff</span></span></a>
    <ul>
        <li><a href="directory.asp">Directory</a></li>
    </ul>
 </li>
 <li><a href="/"><span class="additional-background"><span class="menu-item">HR Area</span></span></a>
    <ul>
        <li><a href="vacation.asp">Manage Vacation Time</a></li>
    </ul>
 </li>
</ul>

</body>
</html>

【讨论】：