CODEWITHSUNDEEP
javascriptjqueryhtml
Jermaine Subia
Jermaine Subia

Reputation: 796

Rearranging html via jquery

I am currently working on a jquery project and I was asked to do the following:

  1. Create a list to hold the below ground veggies.

The way I am looking at this is as you will see in the html below they want me to take all of the classes that say 'below' and take those and put them in their own list under the header that was created via jquery(see below for jquery code).

The difficulty I am having is when I try to prepend under a ul it is doing so within the current li. I have also tried to prepend under the header. I am not sure if prepend is the way to go I am trying to narrow down the targeting and saying place this list in a seperate list under the header via the class.

index.html:

<!DOCTYPE html>
<html lang="en-ca">
    <head>
          <meta charset="utf-8">
          <title>HTML rearranger</title>
          <meta name="viewport" content="width=device-width,initial-scale=1">
    </head>
    <body>

     <ul>
         <li class="below">Potato</li>
         <li class="below">Turnip</li>
         <li class="above">Bean</li>
         <li class="below">Carrot</li>
         <li class="below">Onion</li>
         <li class="above">Corn</li>
         <li class="above">Tomato</li>
    </ul>

    <script src="jquery.min.js"></script>
    <script src="js/main.js"></script>
    </body>
</html>

main.js:

$('body').prepend('<header class="test">Below ground veggies</header>');
$('body ul li').prepend('.below');

Currently in my html view, it is looking like this:

Below ground veggies

.belowPotato
.belowTurnip
.belowBean
.belowCarrot
.belowOnion
.belowCorn
.belowTomato

The final product should look like this:

final product

Here are the full instructions so you can have an idea of what I am doing (I only need guidance on the one part I am asking about):

Use jQuery to manipulate an HTML file an rearrange the content.

  • Fork this repository.
  • DO NOT change the HTML.
  • Use jQuery to perform the following manipulations to the HTML:
    1. Create a heading: “Below ground veggies”.
    2. Create a list to hold the below ground veggies.
    3. Add the heading and list to the document.
    4. Create a second heading for “Above ground veggies” and add it to the document.
    5. Create a list to hold the above ground veggies and add it to the document.
    6. Loop over the veggies that exist in the HTML currently and add them to the appropriate list.
    7. Remove the veggies from the old list.
    8. Completely remove the original list.
  • Run it through Markbot and make sure it passes all the checks.

Goal

Visually match the images in the “screenshots” folder.

Upvotes: 2

Views: 67

Answers (3)

Jeppsen
Jeppsen

Reputation: 497

Solution when strictly following the 8 steps:

// 1. Create a heading: “Below ground veggies”.
var heading1 = $('<h2>Below ground veggies</h2>');

// 2. Create a list to hold the below ground veggies.
var list1 = $('<ul id="below_ground"></ul>');

// 3. Add the heading and list to the document.
$('body').append(heading1).append(list1);

// 4. Create a second heading for “Above ground veggies” and add it to the document.
var heading2 = $('<h2>Above ground veggies</h2>');
$('body').append(heading2);

// 5. Create a list to hold the above ground veggies and add it to the document.
var list2 = $('<ul id="above_ground"></ul>');
$('body').append(list2);

// 6. Loop over the veggies that exist in the HTML currently and add them to the appropriate list.
$( "ul li" ).each(function() {
    if ($(this).hasClass('below')) {
        $('ul#below_ground').append($(this).clone());
    } else { // above
        $('ul#above_ground').append($(this).clone());
    }
});

// 7. Remove the veggies from the old list.
$('ul').not('#below_ground').not('#above_ground').html('');

// 8. Completely remove the original list.
$('ul').not('#below_ground').not('#above_ground').remove();
<!DOCTYPE html>
<html lang="en-ca">
    <head>
          <meta charset="utf-8">
          <title>HTML rearranger</title>
          <meta name="viewport" content="width=device-width,initial-scale=1">
    </head>
    <body>

     <ul>
         <li class="below">Potato</li>
         <li class="below">Turnip</li>
         <li class="above">Bean</li>
         <li class="below">Carrot</li>
         <li class="below">Onion</li>
         <li class="above">Corn</li>
         <li class="above">Tomato</li>
    </ul>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    </body>
</html>

Upvotes: 1

Fantastisk
Fantastisk

Reputation: 488

I think i would do something like this

// select the first list
var first = $('ul');
// add h1 before the list
first.before('<h1>below ground veggies</h1>');

// make a second list
var sub_ul = $('<ul/>');
// find all classes with "above" then append it to the second list
// note when appending it automatically removes the original
first.find('.above').appendTo(sub_ul);
// insert the new list after the first list
first.after('<h1>above ground veggies</h1>', sub_ul);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en-ca">
    <head>
          <meta charset="utf-8">
          <title>HTML rearranger</title>
          <meta name="viewport" content="width=device-width,initial-scale=1">
    </head>
    <body>

     <ul>
         <li class="below">Potato</li>
         <li class="below">Turnip</li>
         <li class="above">Bean</li>
         <li class="below">Carrot</li>
         <li class="below">Onion</li>
         <li class="above">Corn</li>
         <li class="above">Tomato</li>
    </ul>

    <script src="jquery.min.js"></script>
    <script src="js/main.js"></script>
    </body>
</html>

Upvotes: 0

Ganov13
Ganov13

Reputation: 367

is it what your looking for ?

$(function(){
    $('body').prepend('<header class="test">Below ground veggies</header><ul id="belowContainer"></ul>');  
    $('body').prepend('<header class="test">Above ground veggies</header><ul id="aboveContainer"></ul>');
    $('ul li.below').appendTo($("#belowContainer"));
    $('ul li.above').appendTo($("#aboveContainer"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en-ca">
    <head>
          <meta charset="utf-8">
          <title>HTML rearranger</title>
          <meta name="viewport" content="width=device-width,initial-scale=1">
    </head>
    <body>

     <ul>
         <li class="below">Potato</li>
         <li class="below">Turnip</li>
         <li class="above">Bean</li>
         <li class="below">Carrot</li>
         <li class="below">Onion</li>
         <li class="above">Corn</li>
         <li class="above">Tomato</li>
    </ul>

    <script src="jquery.min.js"></script>
    <script src="js/main.js"></script>
    </body>
</html>

Upvotes: 2

Related Questions