Show Contents of Drop Down - javascript

I have code that when clicked expands a drop down to show a set of links. There are three different drop downs each with a different set of links that show when a user clicks.
The script is below, but it is not dynamic. What is a better and more efficient way to write the script, so I do not need to add to it when additional drop downs are needed?
$(".button-nav1").click(function() {
$(".row1").toggle();
});
$(".button-nav2").click(function() {
$(".row2").toggle();
});
$(".button-nav3").click(function() {
$(".row3").toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="row1" class="button-nav1">Joe<span class="crt"> ▼</span>
</div>
<div class="row1 BGpadding">
<ul class="2ndRESET">
<li class="resetTWO"><strong>Overview</strong>
</li>
<li><strong>Training</strong>
</li>
<ul class="resetTWO">
<li>Lorem Lipsum
</li>
</ul>
<li><strong>Toomy</strong>
</li>
<ul class="resetTWO">
<li>Lipsum
</li>
<li>Loremu
</li>
<li>Lipsum
</li>
</ul>
</ul>
</div>
</div>
<div id="row2" class="button-nav2">Joe<span class="crt"> ▼</span>
</div>
<div class="row2 BGpadding">
<ul class="2ndRESET">
<li class="resetTWO"><strong>Overview</strong>
</li>
<li><strong>Training and Help</strong>
</li>
<ul class="resetTWO">
<li>Lorem Lipsum
</li>
</ul>
<li><strong>Toomy</strong>
</li>
<ul class="resetTWO">
<li>Lipsum
</li>
<li>Loremu
</li>
<li>Lipsum
</li>
</ul>
</ul>
</div>
</div>
<div id="row3" class="button-nav3">Joe<span class="crt"> ▼</span>
</div>
<div class="row3 BGpadding">
<ul class="2ndRESET">
<li class="resetTWO"><strong>Overview</strong>
</li>
<li><strong>Training</strong>
</li>
<ul class="resetTWO">
<li>Lorem Lipsum
</li>
</ul>
<li><strong>Toomy</strong>
</li>
<ul class="resetTWO">
<li>Lipsum
</li>
<li>Loremu
</li>
<li>Lipsum
</li>
</ul>
</ul>
</div>
</div>


You can reduce your jquery to one function. First listen to divs that have a class that starts with button-nav with the $("div[class^=button-nav]") query. Then get the id and toggle any class with that id with $("."+$(this).attr('id')).toggle();
$("div[class^=button-nav]").on('click',function() {
$("."+$(this).attr('id')).toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="row1" class="button-nav1">Joe<span class="crt"> ▼</span>
</div>
<div class="row1 BGpadding">
<ul class="2ndRESET">
<li class="resetTWO"><strong>Overview</strong>
</li>
<li><strong>Training</strong>
</li>
<ul class="resetTWO">
<li>Lorem Lipsum
</li>
</ul>
<li><strong>Toomy</strong>
</li>
<ul class="resetTWO">
<li>Lipsum
</li>
<li>Loremu
</li>
<li>Lipsum
</li>
</ul>
</ul>
</div>
</div>
<div id="row2" class="button-nav2">Joe<span class="crt"> ▼</span>
</div>
<div class="row2 BGpadding">
<ul class="2ndRESET">
<li class="resetTWO"><strong>Overview</strong>
</li>
<li><strong>Training and Help</strong>
</li>
<ul class="resetTWO">
<li>Lorem Lipsum
</li>
</ul>
<li><strong>Toomy</strong>
</li>
<ul class="resetTWO">
<li>Lipsum
</li>
<li>Loremu
</li>
<li>Lipsum
</li>
</ul>
</ul>
</div>
</div>
<div id="row3" class="button-nav3">Joe<span class="crt"> ▼</span>
</div>
<div class="row3 BGpadding">
<ul class="2ndRESET">
<li class="resetTWO"><strong>Overview</strong>
</li>
<li><strong>Training</strong>
</li>
<ul class="resetTWO">
<li>Lorem Lipsum
</li>
</ul>
<li><strong>Toomy</strong>
</li>
<ul class="resetTWO">
<li>Lipsum
</li>
<li>Loremu
</li>
<li>Lipsum
</li>
</ul>
</ul>
</div>
</div>


From the code provided I assume .row1 is a typo. I hope you mean #row1. If so the code is reduced to
$('.button-nav1,.button-nav2,.button-nav3').click(function(){
$(this).toggle();
}
To combine all three function in one you can add common class to all .button-nav1, .button-nav2 and .button-nav3 (say button-nav) and change the function to
$(document).on('click', '.button-nav', function(){
$(this).toggle();
}

Related

how to make clickable buttons that add text into a div

i want to create a function that adds text into an empty div depending on what button is clicked
i'm making a calculator as one of my beginner javascript projects (i know i can just use inputs and the "button" tag but i feel this'll be more original and challenging). i'm trying to add events to all the elements in the queryselector all nodelist, i feel my function is correct and i've tried all i can but the code doesn't seem to work, any help at all would be appreciated.
i am trying to create a kind of like input div that reflects the value or text of the clicked list item
let digits = document.querySelectorAll("digit");
let add = document.getElementById("camper");
for (let i = 0; i < digits.length; i++) {
digits[i].addEventListener("click", function() {
add.innerHTML += digits[i].innerHTML
});
digits[i].value = [i];
};
<div class="container">
<div class="camper">
<h3 id="insert"></h3>
</div>
<div class="right-box">
<ul>
<li>
<h3 id="equal">=</h3>
</li>
<li>
<h3 id="plus">+</h3>
</li>
<li>
<h3 id="minus">-</h3>
</li>
<li>
<h3 id="multiply">x</h3>
</li>
<li>
<h3 id="divide">\</h3>
</li>
</ul>
</div>
<div class="write-box">
<ul>
<li class="digit">
<h3>1</h3>
</li>
<li class="digit">
<h3>2</h3>
</li>
<li class="digit">
<h3>3</h3>
</li>
<li class="digit">
<h3>4</h3>
</li>
<li class="digit">
<h3>5</h3>
</li>
<li class="digit">
<h3>6</h3>
</li>
<li class="digit">
<h3>7</h3>
</li>
<li class="digit">
<h3>8</h3>
</li>
<li class="digit">
<h3>9</h3>
</li>
<li class="digit">
<h3>0</h3>
</li>
<li>
<h3>clear</h3>
</li>
<li>
<h3>bkspc</h3>
</li>
</ul>
</div>
</div>

Typos
it is id="camper" and not class="camper" if you want to use getElementById but you likely want insert instead of camper
it is querySelectorAll(".digit") - you are missing the dot in the class selector
Logic
use this.innerText to get the content of the digit
let digits = document.querySelectorAll(".digit");
let add = document.getElementById("insert");
for (let i = 0; i < digits.length; i++) {
digits[i].addEventListener("click", function() {
add.innerHTML += this.innerText;
});
};
<div class="container">
<div class="camper">
<h3 id="insert"></h3>
</div>
<div class="right-box">
<ul>
<li>
<h3 id="equal">=</h3>
</li>
<li>
<h3 id="plus">+</h3>
</li>
<li>
<h3 id="minus">-</h3>
</li>
<li>
<h3 id="multiply">x</h3>
</li>
<li>
<h3 id="divide">\</h3>
</li>
</ul>
</div>
<div class="write-box">
<ul>
<li class="digit">
<h3>1</h3>
</li>
<li class="digit">
<h3>2</h3>
</li>
<li class="digit">
<h3>3</h3>
</li>
<li class="digit">
<h3>4</h3>
</li>
<li class="digit">
<h3>5</h3>
</li>
<li class="digit">
<h3>6</h3>
</li>
<li class="digit">
<h3>7</h3>
</li>
<li class="digit">
<h3>8</h3>
</li>
<li class="digit">
<h3>9</h3>
</li>
<li class="digit">
<h3>0</h3>
</li>
<li>
<h3>clear</h3>
</li>
<li>
<h3>bkspc</h3>
</li>
</ul>
</div>
</div>
Here is a more elegant way - if you are doing homework, you might want to do more coding before looking :)
let add = document.getElementById("insert");
document.getElementById("container").addEventListener("click",function(e) {
const tgt = e.target;
if (tgt.tagName==="H3") {
const text = tgt.innerText;
const cn = tgt.parentNode.className;
if (cn === "digit" || cn === "oper") add.innerText += text;
else if (cn==="action") {
if (text === "clear") {
add.innerText = "";
}
else if (text === "bkspc") {
add.innerText = add.innerText.slice(0,-1);
}
}
}
})
<div id="container">
<div class="camper">
<h2 id="insert"></h2>
</div>
<div class="right-box">
<ul>
<li class="oper">
<h3 id="equal">=</h3>
</li>
<li class="oper">
<h3 id="plus">+</h3>
</li>
<li class="oper">
<h3 id="minus">-</h3>
</li>
<li class="oper">
<h3 id="multiply">x</h3>
</li>
<li class="oper">
<h3 id="divide">\</h3>
</li>
</ul>
</div>
<div class="write-box">
<ul>
<li class="digit">
<h3>1</h3>
</li>
<li class="digit">
<h3>2</h3>
</li>
<li class="digit">
<h3>3</h3>
</li>
<li class="digit">
<h3>4</h3>
</li>
<li class="digit">
<h3>5</h3>
</li>
<li class="digit">
<h3>6</h3>
</li>
<li class="digit">
<h3>7</h3>
</li>
<li class="digit">
<h3>8</h3>
</li>
<li class="digit">
<h3>9</h3>
</li>
<li class="digit">
<h3>0</h3>
</li>
<li class="action">
<h3>clear</h3>
</li>
<li class="action">
<h3>bkspc</h3>
</li>
</ul>
</div>
</div>

You are losing the scope of digits inside the event listener. You need to bind digits to be the scope of this in the event listener like so:
let digits = document.querySelectorAll("digit");
let add = document.getElementById("camper");
for (let i = 0; i < digits.length; i++) {
digits[i].addEventListener("click", function() {
add.innerHTML += this.innerHTML
}).bind(digits[i]);
digits[i].value = [i];
};

Dropdown menu with hover/mouseover event in jQuery

I was trying to make and hover dropdown menu but I cant, well not really, I can make that the menu toggle just the specific items, with my code show all the items available:
Code here:
$(document).on('ready', function(){
var timeout = 0;
$('.nav').hover(function(){
$('.dropdown-menu').slideDown('fast');
},function(){
timeout = setTimeout(hideMenu,300);
});
$(".dropdown-menu").hover(function(){
clearTimeout(timeout);
},function(){
hideMenu();
});
});
function hideMenu(){
$(".dropdown-menu").slideUp('fast');
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-static-top navbar-default">
<div class="container">
<div id="cls">
<div class="navbar-header center">
<div class="navbar-header">
<img class="logo" src="paruno_logo.png">
<ul id="main-menu" class="nav navbar-nav ref">
<li class="dropdown dropdown-large option">
<a id="drop-to" href="/femenino/calzado" class="dropdown-toggle firstTextOption" data-toggle="dropdown">GIRL</a>
<ul class="dropdown-menu dropdown-menu-large row change-f">
<li class="n-smasd">
<ul>
<li class="dropdown-header title">Zapatos</li>
</ul>
<ul>
<li class="dropdown-header title">Botines</li>
</ul>
<ul>
<li class="dropdown-header title">Botas</li>
</ul>
<ul>
<li class="dropdown-header title">Sandalias</li>
</ul>
<ul>
<li class="dropdown-header title">Tenis</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown dropdown-large option hidden-sm hidden-xs">|</li>
<li class="dropdown dropdown-large option">
<a id="drop-to" href="/masculino/calzado" class="dropdown-toggle firstTextOption" data-toggle="dropdown">HUMMIE</a>
<ul class="dropdown-menu dropdown-menu-large row change-f">
<li class="col-sm-3 option-sm">
<ul>
<li class="dropdown-header title">Casuales</li>
</ul>
<ul>
<li class="dropdown-header title">Mocasines</li>
</ul>
</li>
<li class="col-sm-3 option-sm">
<ul>
<li class="dropdown-header title">Botas</li>
</ul>
<ul>
<li class="dropdown-header title">Tenis</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown dropdown-large option hidden-sm hidden-xs">|</li>
<li class="dropdown dropdown-large option">
<a id="drop-to" href="#" class="dropdown-toggle firstTextOption" data-toggle="dropdown">SOULCREATION</a>
<ul class="dropdown-menu dropdown-menu-large row change-f">
<li class="col-sm-3 option-sm">
<ul>
<li class="dropdown-header title">ANGER</li>
</ul>
</li>
<li class="col-sm-3 option-sm">
<ul>
<li class="dropdown-header title">SOUL</li>
</ul>
</li>
<li class="col-sm-3 option-sm">
<ul>
<li class="dropdown-header title">URBAN</li>
</ul>
</li>
<li class="col-sm-3 option-sm">
<ul>
<li class="dropdown-header title">ART</li>
</ul>
</li>
<li class="col-sm-3 option-sm">
<ul>
<li class="dropdown-header title">ALAN ARROUND THE MUNDO</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown dropdown-large option hidden-sm hidden-xs">|</li>
<li class="dropdown dropdown-large option">
<a id="drop-to" href="/femenino/calzado" class="dropdown-toggle firstTextOption"> MAGNIFICIENT </a>
</li>
</ul>
</div>
<!-- /MB -->
</div>
</div>
</div>
To give more information, I use Bootstrap to make a responsive navbar and I don't want to use the Javascript from Bootstrap beacuse I want to get a pure Javascript.

Ok, don't know what do you mean by pure js when you using Jquery and bootstrap (which is using Jquery as well). But add that function to your code
$(document).on('mouseover','.dropdown-toggle',function(e){
$(this).parent('li').children('ul').slideDown('fast');
});
This will open dropdown menu. For hiding it you can research more.
Also I noticed that you have several elements with same id="drop-to". Id value should be unique! Name and class can be same on multiple elements.

How to remove li tag by data attribute using jquery

I want to remove li tag by data attribute.
I want to remove 1st ul of child li which has class name like second Base when click.
My code looks like as below
<div class="box-ul">
<ul data-id="Base" class="left">
<li>Base</li>
<li class="second Base">
<span data-addedname="SignatureBread" class="close-btn">Signature Bread</span>
<span data-addedname="Lettuce" class="close-btn">Lettuce</span>
</li>
</ul>
<ul data-id="Core Filling" class="left">
<li>Core Filling</li>
<li class="second CoreFilling">
<span data-addedname="Steak" class="close-btn">Steak</span>
<span data-addedname="CrispyChecken" class="close-btn">Crispy Checken</span>
</li>
</ul>
<ul data-id="Spreads & Cheeses" class="left">
<li>Spreads & Cheeses</li>
<li class="second SpreadsCheeses"><span data-addedname="HomemadeHommos(Spread)" class="close-btn">Homemade Hommos (Spread)</span>
<span data-addedname="ZaatarWithOliveOil(Spread)" class="close-btn">Zaatar With Olive Oil (Spread)</span>
</li>
</ul>
<ul data-id="Classic Ingredients" class="left">
<li>Classic Ingredients</li>
<li class="second ClassicIngredients"><span data-addedname="Lettuce" class="close-btn">Lettuce</span><span data-addedname="Tomato" class="close-btn">Tomato</span><span data-addedname="Cucumber" class="close-btn">Cucumber</span>
<span data-addedname="Pickles" class="close-btn">Pickles
</span>
</li>
</ul>
<ul data-id="Premium Ingredients" class="left">
<li>Premium Ingredients</li>
<li class="second PremiumIngredients">
<span data-addedname="SundriedTomato" class="close-btn">Sundried Tomato</span>
</li>
</ul>
<ul data-id="Sauces" class="left">
<li>Sauces</li>
<li class="second Sauces">
<span data-addedname="Ketchup*(Classic)" class="close-btn">Ketchup* (Classic)</span>
<span data-addedname="Mayo(Classic)" class="close-btn">Mayo (Classic)</span>
</li>
</ul>
</div>
I want to like this output. Here remove li of first ul.
<div class="box-ul">
<ul data-id="Base" class="left">
<li>Base</li>
</ul>
<ul data-id="Core Filling" class="left">
<li>Core Filling</li>
<li class="second CoreFilling">
<span data-addedname="Steak" class="close-btn">Steak</span>
<span data-addedname="CrispyChecken" class="close-btn">Crispy Checken</span>
</li>
</ul>
<ul data-id="Spreads & Cheeses" class="left">
<li>Spreads & Cheeses</li>
<li class="second SpreadsCheeses">
<span data-addedname="HomemadeHommos(Spread)" class="close-btn">Homemade Hommos (Spread)</span>
<span data-addedname="ZaatarWithOliveOil(Spread)" class="close-btn">Zaatar With Olive Oil (Spread)</span>
</li>
</ul>
<ul data-id="Classic Ingredients" class="left">
<li>Classic Ingredients</li>
<li class="second ClassicIngredients">
<span data-addedname="Lettuce" class="close-btn">Lettuce</span><span data-addedname="Tomato" class="close-btn">Tomato</span>
<span data-addedname="Cucumber" class="close-btn">Cucumber</span>
<span data-addedname="Pickles" class="close-btn">Pickles
</span>
</li>
</ul>
<ul data-id="Premium Ingredients" class="left">
<li>Premium Ingredients</li>
<li class="second PremiumIngredients">
<span data-addedname="SundriedTomato" class="close-btn">Sundried Tomato</span>
</li>
</ul>
<ul data-id="Sauces" class="left">
<li>Sauces</li>
<li class="second Sauces"><span data-addedname="Ketchup*(Classic)" class="close-btn">Ketchup* (Classic)</span><span data-addedname="Mayo(Classic)" class="close-btn">Mayo (Classic)</span>
</li>
</ul>
</div>

https://jsfiddle.net/926vogLk/
$('li.second.Base').click(function() {
$(this).remove();
});
or
if you want to remove first li of ul
$('li.second.Base').click(function() {
$(this).prev().remove();
});

If you want to remove only first ul then try #Akhsay mentioned solution. Or if you want to remove any ul with specific class or data attribute then do this.
$("ul[data-id=Base]").find("li.base").remove()
Or
$("li.Base").remove()

I am not sure if I hunderstood right but:
$("li.second.Base").parent().remove()
might help you

$('.second').on('click',function(){
$(this).fadeOut(300,function(){$(this).remove() });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box-ul">
<ul data-id="Base" class="left">
<li>Base</li>
<li class="second Base"><span data-addedname="SignatureBread" class="close-btn">Signature Bread</span><span data-addedname="Lettuce" class="close-btn">Lettuce</span></li>
</ul>
<ul data-id="Core Filling" class="left">
<li>Core Filling</li>
<li class="second CoreFilling"><span data-addedname="Steak" class="close-btn">Steak</span><span data-addedname="CrispyChecken" class="close-btn">Crispy Checken</span></li>
</ul>
<ul data-id="Spreads & Cheeses" class="left">
<li>Spreads & Cheeses</li>
<li class="second SpreadsCheeses"><span data-addedname="HomemadeHommos(Spread)" class="close-btn">Homemade Hommos (Spread)</span><span data-addedname="ZaatarWithOliveOil(Spread)" class="close-btn">Zaatar With Olive Oil (Spread)</span></li>
</ul>
<ul data-id="Classic Ingredients" class="left">
<li>Classic Ingredients</li>
<li class="second ClassicIngredients"><span data-addedname="Lettuce" class="close-btn">Lettuce</span><span data-addedname="Tomato" class="close-btn">Tomato</span><span data-addedname="Cucumber" class="close-btn">Cucumber</span><span data-addedname="Pickles" class="close-btn">Pickles</span></li>
</ul>
<ul data-id="Premium Ingredients" class="left">
<li>Premium Ingredients</li>
<li class="second PremiumIngredients"><span data-addedname="SundriedTomato" class="close-btn">Sundried Tomato</span></li>
</ul>
<ul data-id="Sauces" class="left">
<li>Sauces</li>
<li class="second Sauces"><span data-addedname="Ketchup*(Classic)" class="close-btn">Ketchup* (Classic)</span><span data-addedname="Mayo(Classic)" class="close-btn">Mayo (Classic)</span></li>
</ul>
</div>

$(function() {
$('body').on('click', function() {
$('.box-ul').find('ul').find('li.Base:first').remove();
});
});

jquery mtree onload open last clicked node with cookie option

I am using mtree( sample you can seehere for display my menu list nodes When i click on the node text (hyperlink) . I want to open the node which i clicked and all other nodes should be closed. I am using the following code.
In main.html page i have list with Africa,America,Asia,Europe,Oceania,Arctica and
Antarctica
Africa is having sub menu as: Algeria,Marocco,Libya,Somalia,Kenya,Mauritania and South Africa( all are hyperlink text)
when I click on kenya text hyperlink it will redirects to kenya.html page so on load of kenya.html i want Africa menu list should open with Kenya text highlighted
main.html
<body>
</div>
<ul class="mtree transit">
<li id ="shiva" class ="shiva">Africa
<ul>
<li>Algeria</li>
<li>Marocco</li>
<li>Libya</li>
<li>Somalia</li>
<li>Kenya</li>
<li>Mauritania</li>
<li>South Africa</li>
</ul>
</li>
<li>America
<ul>
<li>North-America
<ul>
<li>Canada</li>
<li>USA
<ul>
<li>New York</li>
<li>California
<ul>
<li>Los Angeles</li>
<li>San Diego</li>
<li>Sacramento</li>
<li>San Francisco</li>
<li>Bakersville</li>
</ul>
</li>
<li>Lousiana</li>
<li>Texas</li>
<li>Nevada</li>
<li>Montana</li>
<li>Virginia</li>
</ul>
</li>
</ul>
</li>
<li>Middle-America
<ul>
<li>Mexico</li>
<li>Honduras</li>
<li>Guatemala</li>
</ul>
</li>
<li>South-America
<ul>
<li>Brazil</li>
<li>Argentina</li>
<li>Uruguay</li>
<li>Chile</li>
</ul>
</li>
</ul>
</li>
<li>Asia
<ul>
<li>China</li>
<li>India</li>
<li>Malaysia</li>
<li>Thailand</li>
<li>Vietnam</li>
<li>Singapore</li>
<li>Indonesia</li>
<li>Mongolia</li>
</ul>
</li>
<li>Europe
<ul>
<li>North
<ul>
<li>Norway</li>
<li>Sweden</li>
<li>Finland</li>
</ul>
</li>
<li>East
<ul>
<li>Romania</li>
<li>Bulgaria</li>
<li>Poland</li>
</ul>
</li>
<li>South
<ul>
<li>Italy</li>
<li>Greece</li>
<li>Spain</li>
</ul>
</li>
<li>West
<ul>
<li>France</li>
<li>England</li>
<li>Portugal</li>
</ul>
</li>
</ul>
</li>
<li>Oceania
<ul>
<li>Australia</li>
<li>New Zealand</li>
</ul>
</li>
<li>Arctica</li>
<li>Antarctica</li>
</ul>
<script src="jquery.min.js"></script>
<script src='jquery.velocity.min.js'></script>
<script src="mtree.js"></script>
<script src="shiva.js"></script>
THIS IS MAIN PAGE
</body>
kenya.html
<body onload="clickButton()">
</div>
<ul class="mtree transit">
<li id ="shiva" class ="shiva">Africa
<ul id = "shiva">
<li>Algeria</li>
<li>Marocco</li>
<li>Libya</li>
<li>Somalia</li>
<li>Kenya</li>
<li>Mauritania</li>
<li>South Africa</li>
</ul>
</li>
<li>America
<ul>
<li>North-America
<ul>
<li>Canada</li>
<li>USA
<ul>
<li>New York</li>
<li>California
<ul>
<li>Los Angeles</li>
<li>San Diego</li>
<li>Sacramento</li>
<li>San Francisco</li>
<li>Bakersville</li>
</ul>
</li>
<li>Lousiana</li>
<li>Texas</li>
<li>Nevada</li>
<li>Montana</li>
<li>Virginia</li>
</ul>
</li>
</ul>
</li>
<li>Middle-America
<ul>
<li>Mexico</li>
<li>Honduras</li>
<li>Guatemala</li>
</ul>
</li>
<li>South-America
<ul>
<li>Brazil</li>
<li>Argentina</li>
<li>Uruguay</li>
<li>Chile</li>
</ul>
</li>
</ul>
</li>
<li>Asia
<ul>
<li>China</li>
<li>India</li>
<li>Malaysia</li>
<li>Thailand</li>
<li>Vietnam</li>
<li>Singapore</li>
<li>Indonesia</li>
<li>Mongolia</li>
</ul>
</li>
<li>Europe
<ul>
<li>North
<ul>
<li>Norway</li>
<li>Sweden</li>
<li>Finland</li>
</ul>
</li>
<li>East
<ul>
<li>Romania</li>
<li>Bulgaria</li>
<li>Poland</li>
</ul>
</li>
<li>South
<ul>
<li>Italy</li>
<li>Greece</li>
<li>Spain</li>
</ul>
</li>
<li>West
<ul>
<li>France</li>
<li>England</li>
<li>Portugal</li>
</ul>
</li>
</ul>
</li>
<li>Oceania
<ul>
<li>Australia</li>
<li>New Zealand</li>
</ul>
</li>
<li>Arctica</li>
<li>Antarctica</li>
</ul>
<script src="jquery.min.js"></script>
<script src='jquery.velocity.min.js'></script>
<script src="mtree.js"></script>
<script src="shiva.js"></script>
THIS IS Kenya PAGE
</body>

Wrap n-th or less element, wrong result

I have drop down menu in wordpress and I have small problem with wrap nth(every 4th element) li.
My code
<li id="item1"> ... </li>
<li id="item2"> ... </li>
<li id="item3">
<ul class="sub-menu">
<li> Test1</li>
<li> Test2</li>
</ul>
</li>
<li id="item4">
<ul class="sub-menu">
<li> Test3</li>
<li> Test4</li>
<li> Test5</li>
<li> Test6</li>
<li> Test7</li>
<li> Test8</li>
<li> Test9</li>
<li> Test10</li>
<li> Test11</li>
<li> Test12</li>
</ul>
</li>
jQuery code
var divs = $("ul.sub-menu > li");
for(var i = 0; i < divs.length; i+=4) {
divs.slice(i, i+4).wrapAll("<div class='column'></div>");
}
My results (wrong)
<li id="item1"> ... </li>
<li id="item2"> ... </li>
<li id="item3">
<ul class="sub-menu">
<div class="column">
<li> Test1</li>
<li> Test2</li>
<li> Test3</li>
<li> Test4</li>
</div>
</ul>
</li>
<li id="item4">
<ul class="sub-menu">
<div class="column">
<li> Test5</li>
<li> Test6</li>
<li> Test7</li>
<li> Test8</li>
</div>
<div class="column">
<li> Test9</li>
<li> Test10</li>
<li> Test11</li>
<li> Test12</li>
</div>
</ul>
</li>
What I try achieve:
<li id="item1"> ... </li>
<li id="item2"> ... </li>
<li id="item3">
<ul class="sub-menu">
<div class="column">
<li> Test1</li>
<li> Test2</li>
</div>
</ul>
</li>
<li id="item4">
<ul class="sub-menu">
<div class="column">
<li> Test3</li>
<li> Test4</li>
<li> Test5</li>
<li> Test6</li>
</div>
<div class="column">
<li> Test7</li>
<li> Test8</li>
<li> Test9</li>
<li> Test10</li>
</div>
<div class="column">
<li> Test11</li>
<li> Test12</li>
</div>
</ul>
</li>
any idea what I do wrong? It's necessary because "item3" and "item4" are diffrents category and with my code li elements are mix if in first ul is less then 4 items

Wow, what you just did, I didn't know it was possible. :)
Anyway:
$('.sub-menu').each(function() {
var children = $(this).find('> li');
for (var i = 0; i < children.length; i+=4) {
children.slice(i, i+4).wrapAll("<div class='column'></div>");
}
});
This will use the functionality you tried, but it will loop through every submenu independently and the items will be properly grouped.
http://jsfiddle.net/9NUwJ/

Categories

Resources