Question

我正在建立一个网络应用程序，根据用户选择的内容创建一个列表（有点像购物清单）。

假设我们已经创建了下面的列表，然后用户想要添加＆＃34; Grapes＆＃34;。我希望在水果结束时添加葡萄。

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

我目前的代码只在列表末尾添加新项目，而不是在正确的list-divider标题内。

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

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

（我只是根据我的实际项目松散地将这些代码放在一起，所以不要担心完整的jQuery代码。我的问题最终归结为：如何在以下位置添加新的列表项？一个部分的结尾，在下一个list-divider之前？）

Answer 1

您应该可以使用jquery的before()：

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

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

来源：Jquery's before()

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

最后，如果你知道添加一个随机的“divider”类，也许你可以简单地添加一个数据属性来指定它是一个水果（比如说data-type="fruit"），蔬菜等等。你可以这样做：

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

重要：除了所有这些之外，在以下变量中，您的类名称周围有双引号，而变量是用双引号定义的。它应该是单引号，就像其他属性一样。

<强>目前：

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

班级名称应为：

class='addBtn' 不 class="addBtn"

Answer 2

您需要确定新添加的角色然后您可以附加到该列表。

Answer 3

根据您提供的HTML，您的选择器将无法匹配任何内容。将一个类添加到list-divider，然后执行before()

＆＃13;

var newItemToAdd = "<li><a href='#' id='grapes' class='addBtn'>Grapes</a></li>";

$(".list-divider").before(newItemToAdd);

＆＃13;

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

＆＃13;

或者，如果您不想更改html，请将上述javascript更改为：

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

进一步阅读：jQuery .before()

祝你好运！

Answer 4

您可以尝试以下内容：

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

Answer 5

根据您所需要的新信息，我建议您使用类别对列表中的条目类型进行适当的分组（因为<ul>没有任何方式分组<li> s）。我们的想法是标记每一个水果＆＃39;带有.fruit-item类的入口，以及带有.vegetable-item类的每个蔬菜入口，这样你就可以找到一个有效的选择器。例如$('li.fruit-item:last')。请参阅以下新代码：

＆＃13;

var newItemToAdd = "<li><a href='#' id='grapes' class='addBtn'>Grapes</a></li>";

$("li.fruit-item:last").after(newItemToAdd);

＆＃13;

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

＆＃13;

JQuery在list-divider之前追加元素

5 个答案: