jQuery无法将li添加到ul

Question

我正在尝试使用jquery在ul内添加li。 无法在以下行中添加li。 这是什么问题？

我的小提琴在这里

<ul class='custom-menu'>
  <li data-action="first">First thing</li>
  <li data-action="second">Second thing</li>
  <li data-action="third">Third thing</li>
</ul>

 $(".custom-menu ul:last").append('<li> hey test ...</li>');
 //$(".custom-menu ul").append('<li> hey test ...</li>');
 console.log($('.custom-menu').html());

Answer 1

最干净的解决方案是$(".custom-menu").append('<li> hey test ...</li>'); ，如LXhelili和j08691所述。 由于append将指定的内容作为jQuery集合中每个元素的最后一个子项插入，因此您无需指定:last 。

编辑以解决下面的评论。

Answer 2

您想将.after()与li:last ，而不是.append()或ul:last

$(".custom-menu li:last").after('<li> hey test ...</li>');

  $(".custom-menu li:last").after('<li> hey test ...</li>'); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class='custom-menu'> <li data-action="first">First thing</li> <li data-action="second">Second thing</li> <li data-action="third">Third thing</li> </ul> 

或者，您可以将.append()与<ul>使用（否:last需要使用）：

$(".custom-menu").append('<li> hey test ...</li>');

as .append()默认将内容作为最后一个子项插入。

  $(".custom-menu").append('<li> hey test ...</li>'); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class='custom-menu'> <li data-action="first">First thing</li> <li data-action="second">Second thing</li> <li data-action="third">Third thing</li> </ul> 

.after() ：在匹配的元素集中的每个元素之后插入内容。

.append() ：将内容插入到匹配元素集中每个元素的末尾。 .append（）方法将指定的内容作为jQuery集合中每个元素的最后一个子元素插入

注意两者之间的区别。 .after()在您指定的元素之后插入内容，而.append()将内容作为您指定的元素的最后一个子元素插入。

Answer 3

这条路。

 $(".custom-menu").append('<li> hey test ...</li>');
 //$(".custom-menu ul").append('<li> hey test ...</li>');
 console.log($('.custom-menu').html());

https://jsfiddle.net/cbfys0o0/

Answer 4

您需要将选择器从.custom-menu ul:last更改为ul.custom-menu:last 。

.custom-menu ul:last针对.custom-menu的last ul元素。

ul.custom-menu:last面向类为.custom-menu的最后一个ul元素。

这是最新的小提琴 。

Answer 5

$(".custom-menu ul:last").append指向.custom-menu的最后一个ul ，即ul本身。 您想要做的是在.custom-menu内附加一个li 。 因此，您的代码应为：

 $(".custom-menu").append('<li> hey test ...</li>');

或者，或者：

$(".custom-menu li:last").after('<li> hey test ...</li>');

见小提琴 。