JQuery在列表分隔符之前追加元素

Question

我正在构建一个基于用户选择的内容（有点像购物清单）创建列表的Web应用程序。

比方说我们已经创建了下面的列表，然后用户想添加“葡萄”。我想要在水果的末端添加葡萄。

<ul data-role="listview" id="listOfThings"> 
    <li data-role="list-divider" id="fruit">Fruit</li> 
    <li><a href="#" id="apple" class="addBtn">Apple</a></li> 
    <li><a href="#" id="orange" class="addBtn">Orange</a></li> 
    <li><a href="#" id="banana" class="addBtn">Banana</a></li> 
    <li data-role="list-divider">Vegetables</li> 
    <li><a href="#" id="carrot" class="addBtn">Carrot</a></li> 
    <li><a href="#" id="celery" class="addBtn">Celery</a></li> 
</ul> 

我现在的代码只在列表的末尾添加新项目，而不是在正确的列表分隔标题中。

var newItemToAdd = "<li><a href='#' id='grapes' class="addBtn">Grapes</a></li>"; 

$("#listOfThings .ui-last-child").after($newItemToAdd); 

（我刚抛出这个代码一起在我的实际项目松散的基础，所以不要worrk有关全jQuery代码我的问题最终归结为：我怎样才能在添加一个新的列表项一节结束，下一个列表分频器之前）

Answer 1

基于对您所需要的新的信息，我建议你做种用类列表中的条目（的正确分组，因为<ul>小号唐没有任何分组<li>的方法）。这个想法是用class .fruit-item标记每个'水果'入口，并且每个蔬菜入口都带有class。vegetable-item，这样你就可以得到一个可以工作的选择器。例如$('li.fruit-item:last')。请参见下面的新代码：

var newItemToAdd = "<li><a href='#' id='grapes' class='addBtn'>Grapes</a></li>"; 
 

 
$("li.fruit-item:last").after(newItemToAdd);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<ul data-role="listview" id="listOfThings"> 
 
    <li data-role="list-divider" id="fruit">Fruit</li> 
 
    <li class="fruit-item"><a href="#" id="apple" class="addBtn">Apple</a></li> 
 
    <li class="fruit-item"><a href="#" id="orange" class="addBtn">Orange</a></li> 
 
    <li class="fruit-item"><a href="#" id="banana" class="addBtn">Banana</a></li> 
 
    <li class="list-divider" data-role="list-divider">Vegetables</li> 
 
    <li class="vegetable-item"><a href="#" id="carrot" class="addBtn">Carrot</a></li> 
 
    <li class="vegetable-item"><a href="#" id="celery" class="addBtn">Celery</a></li> 
 
</ul>

Answer 2

您应该能够使用jQuery的before()：

插入内容，由指定的参数，每个元素之前在 集的匹配元素。

$('.list-divider').before(newItemToAdd); 

来源：Jquery's before()

---

另外，.ui-last-child是一个类名称，而不是正确地使用伪元件。我想你的意图是ul li:last-child

---

最后，如果你有足够的知识添加一个随机的“分水岭”类，也许你可以简单地添加一个数据属性，指定如果一个水果（可以说data-type="fruit"），蔬菜等等。在这种情况下，你可以这样做：

$("[data-type='fruit']:last-child").after($newItemToAdd); 

---

重要：除了所有这一切，在你的下面的变量，你必须在你的类名双引号，而你的变量定义一世n双引号。它应该是像其他属性一样的单引号。

目前：

var newItemToAdd = "<li><a href='#' id='grapes' class="addBtn">Grapes</a></li>"; 

类名称应该是：

class='addBtn'不class="addBtn"

Answer 3

您需要确定哪一个角色，新增加应该然后放在你可以附加到该列表。

Answer 4

根据您提供的html，您的选择器不会匹配任何内容。一类添加到您的列表分隔，并做了before()

var newItemToAdd = "<li><a href='#' id='grapes' class='addBtn'>Grapes</a></li>"; 
 

 
$(".list-divider").before(newItemToAdd);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<ul data-role="listview" id="listOfThings"> 
 
    <li data-role="list-divider" id="fruit">Fruit</li> 
 
    <li><a href="#" id="apple" class="addBtn">Apple</a></li> 
 
    <li><a href="#" id="orange" class="addBtn">Orange</a></li> 
 
    <li><a href="#" id="banana" class="addBtn">Banana</a></li> 
 
    <li class="list-divider" data-role="list-divider">Vegetables</li> 
 
    <li><a href="#" id="carrot" class="addBtn">Carrot</a></li> 
 
    <li><a href="#" id="celery" class="addBtn">Celery</a></li> 
 
</ul>

或者如果你不想更改HTML，修改以上的JavaScript这样：

$("li[data-role='list-divider']").before(newItemToAdd); 

延伸阅读：jQuery .before()

祝你好运！

Answer 5

你可以尝试这样的：

var div = $("[data-role='list-divider']:contains('Vegetables')")[0]; 
$('<li><a href="#" id="banana" class="addBtn">Users Fruit</a></li>').prependTo(divs);