如何附加到第一个子jquery_Jquery_Html

如何附加到第一个子jquery

jquery html

如何附加到第一个子jquery,jquery,html,Jquery,Html,所以我给了这个网站，我必须写这段jquery来修改它。我不能编辑HTML，但我可以编辑jquery。我就是想不出如何只在tortilla下添加一个，而不在其他列表中添加。当我运行下面第二行注释掉的jquery时，它可以工作，但也可以每隔一行编辑一次。我怎么能只附加到第一个孩子，然后删除另一个，而不是一个玉米饼。谢谢，我的首选输出如下成分 1.玉米饼米饭豆子牛排生菜奶酪西红柿鳄梨酱酸奶油这是我到目前为止的Html代码： <!DOCTYPE html> <h

所以我给了这个网站，我必须写这段jquery来修改它。我不能编辑HTML，但我可以编辑jquery。我就是想不出如何只在tortilla下添加一个

，而不在其他列表中添加。当我运行下面第二行注释掉的jquery时，它可以工作，但也可以每隔一行编辑一次。我怎么能只附加到第一个孩子，然后删除另一个，而不是一个玉米饼。谢谢，我的首选输出如下

成分

1.玉米饼

米饭
豆子
牛排
生菜
奶酪
西红柿
鳄梨酱
酸奶油

这是我到目前为止的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>");

$（文档）.ready（函数（）{
//$（“ol li:第一个孩子”）.addClass（“玉米饼”）；
$（“li”）.append（“您很接近。没有，只有一个，所以您应该选择它
$(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();
});

$（文档）.ready（函数（）{
$（“ol>li:第一个孩子”）。追加（$（“”）。
.append（“大米”）
.append（“bean”）
.append（“牛排”）
...
.附加（“酸奶油”）；
$（“ol>li:not（：first child）”）.remove（）；
});

另一种方法是：
$(document).ready(function() {
    var ul = $("<ul>");
    ul.append($("ol li:not(:first-child)")).appendTo("ol > li:first-child");
});

$（文档）.ready（函数（）{
var ul=$（“”）；
ul.append（$（“ol li:非（：第一个孩子）”）。appendTo（“ol>li:第一个孩子”）；
});


第二个版本只是将第一个列表项之后的所有列表项移动到第一个列表项下的中。
使用li:first child
或$（'li'）以第一个li为目标。first（）
，然后附加'ul'和find（）
刚刚添加的ul
，然后附加所有新的li
。以下是您的操作方法：
$(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();
});

$（文档）.ready（函数（）{
$（'li'）.first（）/*或$（'li:第一个孩子”）*/
.append（“”）.find（'ul'）
.append（“大米”）
.append（“bean”）
.append（“牛排”）
.append（“莴苣”）
.append（“奶酪”）
.append（“番茄”）
.append（“鳄梨酱”）
.append（“酸奶油”）
.end（）.sides（）.remove（）；
});


编辑
请注意，此已更新以删除其他li
，演示已更新。

这将抓住现有列表并创建您需要的内容。
虽然您已经接受了答案，但我想我还是花点时间发布一个替代方法：
// 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);

//缓存对第一个li元素的引用：
var tortilla=$（'ol>li:第一个孩子'）；
//从第一个li元素开始：
玉米饼
//获取以下所有同级元素：
.nextAll（）
//用包装这些兄弟姐妹：
.wrapAll（“”）
//wrapAll返回包装的元素，因此我们从包装的元素开始移动
//将元素添加到新父级：
.最近的（'ul'）
//将新创建的附加到第一个（缓存的）li元素：
.附件（玉米饼）；


这种方法获取兄弟元素并移动它们，从而避免了删除任何元素的必要性
参考资料：





OP还想删除另一个li
。我该如何删除另一个无用的li
“我已经在回答中添加了这一点，你确定要明确地附加所有这些内容吗？看起来你只需要将除第一个以外的所有LIs向下移动一级..first（）是我需要让我的工作。忘了那个。特别是当我使用DIV元素，而不是列表时。第一个孩子不工作。