CODEWITHSUNDEEP
jqueryhtml
user2985103
user2985103

Reputation:

How to append to first child jquery

So im givin this site and I have to write this block of jquery to modify it. I can't edit the HTML but I can edit the jquery. I just cant figure out how to only add a <ul> only under <li>tortilla</li> and not the the other lists. When i run the jquery below with the second line commented out it works but also edits every other <li>. How woyld i be able to just append to the first child only and then delete the other <li> lists other then the one tortilla. Thank you my preferred output is below as well

ingredients

1.tortilla

this is the Html code i have so far:

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

this is my jquery code i have so far

$(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>");

});

Upvotes: 2

Views: 2831

Answers (4)

David Thomas
David Thomas

Reputation: 253308

While you've already accepted an answer, I thought I'd take the time to post an alternative approach:

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

This approach takes the siblings and moves them, which avoids the necessity of deleting any elements.

References:

Upvotes: 0

Palmer
Palmer

Reputation: 173

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

This grabs the existing list and creates what you need.

Upvotes: 0

PeterKA
PeterKA

Reputation: 24638

Target the first li using either li:first-child or $('li').first(), then append 'ul',and find() the ul just added, then append all the new li's. Here is how you do that:

$(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();
});

JS FIDDLE DEMO

EDIT

Please note that this has been updated to remove the other li's and the demo is updated.

Upvotes: 2

Barmar
Barmar

Reputation: 780723

You were close. There's no <span>, just an <li>, so you should select that.

$(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();
});

Another way you can do this is:

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

DEMO

This second version just moves all the list items after the first into a <ul> under the first one.

Upvotes: 0

Related Questions