Question

所以即时通讯这个网站，我必须编写这个jquery块来修改它。我无法编辑HTML但我可以编辑jquery。我只是弄清楚如何仅在<ul>下添加<li>tortilla</li>而不是其他列表。当我运行下面的jquery时，第二行注释掉它可以工作，但也会编辑其他<li>。我怎么能只追加到第一个孩子，然后删除除了一个玉米饼之外的其他<li>列表。谢谢你我的首选输出也在下面

成分

1.tortilla

稻
豆
牛排
莴苣
干酪
番茄
鳄梨
酸奶油

这是我到目前为止的Html代码：

<!DOCTYPE html>
<html>
    <head>
        <title>Burrito</title>
        <script type='text/javascript' src='script.js'></script>
    </head>
    <body>
    <h1>ingredients</h2>
    <ol>
    <li>tortilla</li>
    <li>rice</li>
    <li>beans</li>
    <li>steak</li>
    <li>lettuce</li>
    <li>cheese</li>
    <li>tomatoes</li>
    <li>guacamole</li>
    <li>sour cream</li>
    </ol>


    </body>
</html>

这是我到目前为止的jquery代码

$(document).ready(function(){
  // $("ol li:first-child").addClass("tortilla");
    $("li").append("<ul></ul");
    $("ul").append("<li>rice</li>");
    $("ul").append("<li>beans</li>");
    $("ul").append("<li>steak</li>");
    $("ul").append("<li>lettuce</li>");
    $("ul").append("<li>cheese</li>");
    $("ul").append("<li>tomatoes</li>");
    $("ul").append("<li>guacamole</li>");
    $("ul").append("<li>sour cream</li>");

}）;

Answer 1

你很亲密。没有<span>，只有<li>，所以你应该选择它。

$(document).ready(function() {
    $("ol > li:first-child").append($("<ul>").
        .append("<li>rice</li>")
        .append("<li>beans</li>")
        .append("<li>steak</li>")
        ...
        .append("<li>sour cream</li>"));
    $("ol > li:not(:first-child)").remove();
});

另一种方法是：

$(document).ready(function() {
    var ul = $("<ul>");
    ul.append($("ol li:not(:first-child)")).appendTo("ol > li:first-child");
});

DEMO

第二个版本只是将第一个列表中的所有列表项移动到第一个下的<ul>下。

Answer 2

使用li:first-child或$('li').first()定位第一个li，然后追加'ul'，find()刚添加的ul，然后追加所有新{{1} }}的。这是你如何做到的：

li

JS FIDDLE DEMO

修改

请注意，此更新已删除其他$(document).ready(function(){ $('li').first() /* or $("li:first-child") */ .append( '<ul/>' ).find( 'ul' ) .append("<li>rice</li>") .append("<li>beans</li>") .append("<li>steak</li>") .append("<li>lettuce</li>") .append("<li>cheese</li>") .append("<li>tomatoes</li>") .append("<li>guacamole</li>") .append("<li>sour cream</li>") .end().siblings().remove(); });，并且演示已更新。

Answer 3

http://codepen.io/anon/pen/CgEDn

这会抓取现有列表并创建您需要的内容。

Answer 4

虽然您已经接受了答案，但我认为我会花时间发布替代方法：

// caching a reference to the first li element:
var tortilla = $('ol > li:first-child');

// starting from that first li element:
tortilla
// getting all following sibling elements:
.nextAll()
// wrapping those siblings in a <ul>:
.wrapAll('<ul></ul>')
// wrapAll returns the wrapped elements, so we move from the wrapped
// <li> elements to the new parent <ul>:
.closest('ul')
// append that newly-created <ul> to the first (cached) li element:
.appendTo(tortilla);

JS Fiddle demo

这种方法接受兄弟姐妹并移动它们，这避免了删除任何元素的必要性。

参考文献：

如何附加到第一个子jquery

4 个答案: