在列表分隔符前添加元素

JQuery append element before list-divider

本文关键字：添加 元素 分隔符 列表      更新时间：2023-09-26

我正在构建一个基于用户选择的列表(有点像购物清单)的web应用程序。

假设我们已经创建了下面的列表，然后用户想要添加"Grapes"。我想把葡萄放在水果的最后。

<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);

(我只是根据我的实际项目松散地把这些代码放在一起，所以不要研究完整的jQuery代码。我的问题最终归结为:我如何在一个部分的末尾，在下一个列表分隔符之前添加一个新的列表项?

你应该能够使用jquery的before():

元素的每个元素之前插入由参数指定的内容匹配元素的集合。 
$('.list-divider').before(newItemToAdd);
来源:Jquery的before()

另外，.ui-last-child是一个类名，没有正确使用psuedo元素。我认为你的意图是ul li:last-child

最后，如果你知道添加一个随机的"分隔器"类，也许你可以简单地添加一个数据属性，指定它是水果(假设data-type="fruit")，蔬菜，等等。在这种情况下，你可以这样做:

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

重要的:除此之外，在下一个变量中，您的类名周围有双引号，而您的变量是用双引号定义的。它应该像其他属性一样使用单引号。

目前

: 

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

类名应该是:

class='addBtn' NOT class="addBtn"

根据您需要的新信息，我建议您使用类对列表中的条目类型进行适当的分组(因为<ul> s没有任何分组<li> s的方法)。这个想法是将每个"水果"条目标记为类。fruit-item，每个蔬菜条目标记为类。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>

您需要确定新添加的角色应该放置在哪个角色，然后您可以将其添加到该列表

根据您提供的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()

祝你好运!

您可以尝试这样做:

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