I'm seeking help to see if it's possible to reorder the items in a navigation bar. The bar itself is created by a module within a CMS that is locked to editing.
As such, I'd like to reorder the "buttons" so that the 4th option will move to be the 1st in the menu bar.
The locked module creates the following HTML:
<div class="navigation-primary">
<ul>
<li>AAA</li>
<li>BBB</li>
<li>CCC</li>
<li>DDD</li>
</ul>
</div>
Could I accomplish this with Javascript or jQuery?
Use document.querySelectorAll() to get the list items, and a reference to the ul. Then prepend the last list item to the ul:
var listItems = document.querySelectorAll('.navigation-primary li');
document.querySelector('.navigation-primary > ul').prepend(listItems[listItems.length - 1]);
<div class="navigation-primary">
<ul>
<li>AAA</li>
<li>BBB</li>
<li>CCC</li>
<li>DDD</li>
</ul>
</div>
Related
I've been searching a lot for this, without any solution so far. As you might also have seen the topic title might be a little hard to interpret and that's because I'm not quite sure how to explain it shortly.
The problem
Looking at the HTML below, I know the class of the last element called "active" and this element is chosen dynamically in jQuery, based on which site the visitor is on currently - i.e. different elements has this class depending on the site. On another site the li with class first-sub-li could have the class active (or for that matter the li with class first). This class is, as said, added dynamically based on the site with jquery. From here on I wish to identify the parent of the element with active which is a direct descendent of top-parent and add a class called active-parent to this. I.e. in the case below i wish to add the active-parent class to the li with class second.
EDIT: Please note that the "depth" of the list can vary, therefore also requiring a "dynamic" approach to picking out the parent. I completely forgot this in the initial writing.
<ul id="top-parent">
<li class="first">
<ul class="first-sub-ul">
<li class="first-sub-li"></li>
</ul>
</li>
<li class="second">
<ul class="second-sub-ul">
<li class="second-sub-li">
<ul class="second-sub-sub-ul">
<li class="second-sub-sub-li active"></li> <!-- Here -->
</ul>
</li>
</ul>
</li>
</ul>
So far I've tried the following jQuery without succes as it doesn't identify it.
EDIT 2: This actually does work, but initially it didn't as it apparently was called before the class was loaded, despite appearing later in the javascript document. Wrapping it in a $(window).on("load", function() solves the problem as shown below.
$(window).on("load", function() {
$(".active").closest("#top-parent > li").addClass("active-parent");
});
The original code was just $(".active").closest("#top-parent > li").addClass("active-parent");
You can start traversing up with .parent(), it will excluding the self li.
$(".active").parent().closest("li").addClass("active-parent");
You can use :has() selector
$('#top-parent > li:has(.active)').addClass("active-parent");
$('#top-parent > li:has(.active)').addClass("active-parent");
.active-parent {
background-color: red
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="top-parent">
<li class="first">
<ul class="first-sub-ul">
<li class="first-sub-li"></li>
</ul>
</li>
<li class="second">
<ul class="second-sub-ul">
<li class="second-sub-li">
<ul class="second-sub-sub-ul">
<li class="second-sub-sub-li active"></li>
<!-- Here -->
</ul>
</li>
</ul>
</li>
</ul>
I think this is what you're looking for. Find all li which are direct descendants of topmost-parent and filter that for the one which has a child .active. Apply the class.
$('#top-parent > li').filter(function(e){
return $(this).find('.active').length>0;
}).addClass("active-parent");
.active-parent{background-color:red}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="top-parent">
<li class="first">
<ul class="first-sub-ul">
<li class="first-sub-li">1.1</li>
</ul>
</li>
<li class="second">
<ul class="second-sub-ul">
<li class="second-sub-li active">2.1</li> <!-- Here -->
</ul>
</li>
</ul>
I have built an collapsable tree with li and ul elements. I am using the jQuery.fadeIn and jQuery.fadeOut to collapse respectively show branches in the tree by applying these functions to nested ul elements.
Works nearly perfect, but a small problem appears when collapsed branches are shown: If the branch to show contains collapsed branches itself, the collapse state of these branches will not be preserved meaning that all the child branches will also be shown.
<li id="branch1"> Item 1
<ul style="display:none">
<li> Branch 1
<ul style="display:none">
...
</ul>
</li>
</ul>
</li>
If I now call the following, also the Branch 1 will be faded in.
jQuery("#branch1 ul").fadeIn();
Its because your query is getting both the elements. $('#branch1 ul') returns them both. Use this to get just the first one:
var a= jQuery("#branch1>ul")
a.fadeIn();
It was my problem by applying the function to multiple elements using an incorrect jQuery-selector. The function should work as expected.
Your code structure be like this
<ul>
<li id="branch1"> Item 1 </li>
<ul style="display:none">
<li> Branch 1</li>
<ul style="display:none">
<li> Branch 3</li>
</ul>
</ul>
in this structure your jQuery code will be work .
jQuery("#branch1 ul").fadeIn();
this is my site.
this is how I finally make it look like
I want to divide the the menu list items into two sub menu say menu left and right. And then wrap them in a div. This is make it easy for me to style them and this way they would stay responsive as well.
Now, I have been trying to achieve this by
jQuery( ".menu-item-580", ".menu-item-583",".menu-item-584",".menu-item-563").wrapAll("<div class='new' />").after(".menubar-brand");
I have trying this in browser console.
I also tried same above code by using appendTo() instead of after()
But, still no luck.
In your code you're basically doing this:
<ul>
<li>
<div class="new">
<li>
<li>
</div>
<li>
</ul>
which is not a valid markup.
The easiest way to goup <li>s would be to assign different additional css classes to different parts of the list:
<ul>
<li class="group1">
<li class="group1">
<li class="group2">
<li class="group2">
</ul>
Also, have a look at this: Is there a way to group `<li>` elements?
I have a problem figuring out how to make my menu items dynamically change other list items when clicked on.
For example I want Box1:
<nav class="left">
<ul>
<li>
<br>box1
</li>
...
to update the li's in the 'topnav' class:
<header class="topnav">
<ul>
<li>Item</li>
<li>Item2</li>
<li>Item3</li>
</ul>
</header>
so when a user clicks box1 menu item on the left class navigation menu, the for instance - 'Item'/'Item2'/'Item3' list item updates to lets say "NewItemName"/"NewItemName2"/"NewItemName3"
example codepen:
http://codepen.io/anon/pen/Epiom
edit:
I am trying to change the li's of (item,item2,item3) with new ones when you click the side bars navigation buttons. ex, when you click settings the 3 top buttons(top nav li's) would change to profile settings, video settings, sound settings (these names are made up and not in the code)
Check this fiddle whose code is also below and tell me if it is what you want
<body>
<header class="topnav">
<ul>
<li>Item
</li>
<li>Item2
</li>
<li>Item3
</li>
</ul>
</header>
<nav class="left">
<ul>
<li>box</li>
<li>otherbox</li>
</ul>
</nav>
<script>
$(function()
{
$(".left li").click(function()
{
var box = $(this).html();
$( ".topnav li a" ).each(function( index )
{
$(this).html("New" + box + "_" + index)
});
});
});
</script>
</body>
EDIT:
http://codepen.io/zen_coder/pen/beCKf
This code uses Jquery
Click on the right boxes and item menu will change
I had to remove the links href="" because unless the href starts with '#' and points inside the current page clicking the link makes you leave the page!
If you are just starting front end development you may want to have a look at:
http://www.w3schools.com/
http://jquery.com/
http://jqueryui.com/
http://getbootstrap.com/
I have a an unordered list like this:
<ul id="mylist">
<li id="1">Heading</li>
<li id="2">Second</li>
</ul>
What I want to do is, when I add another list item:
<li id="3">First</li>
It needs to be prepended to the list item which is just below the first list item in "mylist". ie, just below 'Heading' in this case. So the final list looks like this:
<ul id="mylist">
<li id="1">Heading</li>
<li id="3">First</li>
<li id="2">Second</li>
</ul>
Thanks in advance.
NB: What I learned from trying to implement this is, when we append or prepend some content to an element selected with jQuery, it'll get prepended or appended to the content inside the selected element.
You can use after method and :first selector:
$('#mylist li:first').after('<li id="3">First</li>')
http://api.jquery.com/after/
You can use .after, or .insertAfter, for being more precise about placement in the DOM tree.