如何将 class 添加到位于 .html() 变量中的 <li>？

Question

我有一个变量，用于保存某个 div 的 HTML:

var menu = $(".menu").html();

保存的 html() = var menu 看起来如下：

<li>
    <a href="#">item 1</a>
</li>
<li>
    <a href="#">item 2</a>
</li>

然后将两个 <li> 复制到另一个 div

otherDiv.append(menu);

问题： 我想向 .html() 中包含的每个 <li> 添加一个 class在我将它们附加到 otherDiv 之前。原来的<li>不能碰，需要保持原状。

Answer 1

一种方法：

var menu = $('.menu')
    // cloning the found element(s), preserving event-handlers:
    .clone(true, true)
    // finding the descendant <li> elements:
    .find('li')
    // adding the 'newClass' class-name to those found <li> elements:
    .addClass('newClass')
    // returning to the original selection ('.menu'):
    .end()
    // retrieving the innerHTML:
    .html();

var menu = $('.menu').clone(true, true).find('li').addClass('newClass').end().html();

$('#otherElement').html(menu);

li a {
  color: #f00;
}
li.newClass a {
  color: #0f0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="menu">
  <li>
    <a href="#">item 1</a>
  </li>
  <li>
    <a href="#">item 2</a>
  </li>
</ul>

<ol id="otherElement"></ol>

参考文献：

Answer 2

试试 jQuery 的 .clone():

var menu = $(".menu").clone().html();

它将创建一个深拷贝，然后您可以将 class 添加到每个包含的 <li>。这样你就不会改变原始元素。

Answer 3

尝试利用 .append( function ) , jQuery.parseHTML

var menu = $(".menu").html(), name = "other-menu";
$("#otherDiv").append(function() {
  return $.parseHTML(menu).map(function(html) {
    html.className = name;
    return html.outerHTML
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<ul class="menu">
<li>
    <a href="#">item 1</a>
</li>
<li>
    <a href="#">item 2</a>
</li>
</ul>
<ul id="otherDiv">
</ul>

Answer 4

没有 .clone() 的另一种方法可能是

var menu = $(".menu").html();
otherDiv.append(menu).find("li").addClass("test");

原始 li 元素保持不变。我没有看到在附加元素后添加 class 的区别。

如何将 class 添加到位于 .html() 变量中的 <li>？

How to add class to <li> located within a .html() variable?

jquery

append