This is my original menu.
<ul class="mymenu">
<li>1 HTML </li>
<li>2 CSS
<ul>
<li>3.1 jQuery
<ul>
<li>3.1.1 Download</li>
<li>3.1.2 Tutorial</li>
</ul>
</li>
</ul>
</li>
<li>3 Javascript </li>
</ul>
I want to convert it into
<ul class="mymenu">
<li>1 HTML </li>
<li>2 CSS <span class="parent">▼</span>
<ul>
<li>3.1 jQuery
<ul>
<li>3.1.1 Download</li>
<li>3.1.2 Tutorial</li>
</ul>
</li>
</ul>
</li>
<li>3 Javascript </li>
</ul>
The difference between two menu is,
<span class="parent">▼</span>
I want to add dropdown arrow to the each element which has submenu.
I want Jquery or javascript solution.
I will provide two solutions to the problem.
1). Javascript solution. Using jQuery you can achieve it pretty easy:
$('a + ul').prev('a').append('<span class="parent">▼</span>');
Demo: http://plnkr.co/edit/37k1KMpqJ6G2tPrvprBa?p=preview
2). CSS only solution. Using modern pseudo selectors you can do this:
li a:not(:only-child):after {
content: '\25bc';
}
Additional info: :only-child and :not selectors. Support: IE9+.
Note: CSS solution is not equivalent to javascript one, as it doesn't insert span.parent element in DOM.
Demo: http://plnkr.co/edit/sfoctCWzjRCBlXG9dVyD?p=preview
Related
I want to click on a button like this using Pure javascript:
<ul>
<li class="inactive-link">Schedule Appointment</li>
<li class="inactive-link">Schedule Appointment</li>
</ul>
Try
<ul>
<li class="inactive-link">Schedule Appointment</li>
<li class="inactive-link">Schedule Appointment</li>
</ul>
The question is pretty unclear regarding what you're trying to achieve but for the js part use
document.querySelector(".inactive-link a").addEventListener('click',()=>{
window.location="appointment?q=q8345lbf3r9tcmgMnfsad"
})
Adds the click event to the first li>a element (You can add it to all using forEach). This produces an equivalent result.
I have a HTML code of nested list giving me a hard time to read with jQuery!
I'm using
$.get();
to get the html then using
$(data).find(".thelist ul");
To get the list only which looks like
<ul>
<li>Draft Page
<ul>
<li>Batch Version 7</li>
</ul>
</li>
<li>info Control System
<ul>
<li>About info</li>
</ul>
<ul>
<li>Application
<ul>
<li>Functionality
<ul>
<li>
Access
</li>
</ul>
<ul>
<li>Login
</li>
</ul>
<ul>
<li>info Desktop
</li>
</ul>
<ul>
<li>Search
</li>
</ul>
<ul>
<li>info Mobile
</li>
</ul>
</li>
</ul>
</li>
</ul>
<ul>
<li>Support</li>
</ul>
<ul>
<li>Technical Manual
<ul>
<li>Formatting
</li>
</ul>
<ul>
<li>Troubleshooting</li>
</ul>
</li>
</ul>
</li>
</ul>
The actual list is more than 200 item! and it can go up to 7 levels!
What im getting is every item that has children the text is including all of their text!.
I need to get the text and the link of each then append or generate my own list with same level but different html structure
Is this the best approach ?
I have tried iterating using $each()
try this it will give all titles with links.
$(function(){
var links = [];
$( "ul" ).find( "a" ).each(function(k,v){
links.push({ title : $(v).text(), link : $(v).attr('href'), level : $(v).parents('ul').length });
});
console.log(links);
});
Assuming the <ul> you've shown above is the one inside the .thelist block.
I think it'll be easier if you just use $(data).find(".thelist ul li") to get all the list items inside the <ul> element (and subelements).
Or, if you want to go down just one level, you can do $(data).find(".thelist ul>li").
And, you can use the following method to avoid selecting children nodes:
$("#foo")
.clone() //clone the element
.children() //select all the children
.remove() //remove all the children
.end() //again go back to selected element
.text();
I got this removing children idea from here.
I hope this helps.
I was wondering how to count all the list items inside a div.
<ul class="menu">
<li>Home
</li>
<li>Contact
</li>
<li><a>Information</a>
<ul>
<li>History
</li>
<li>Present
</li>
<li>Future
</li>
</ul>
</li>
<li><a>Tutorials</a>
<ul>
<li>HTML/CSS
</li>
<li>Javascript
</li>
<li>Jquery
</li>
<li>PHP
</li>
</ul>
</li>
<li>Structure
</li>
</ul>
How do I count all the list elements inside ul class=menu? And not the list items who are in a deeper UL.
What I mean is how to count Home, Contact, Information, Tutorials, Structure, and not the list elements who are inside these I just mentioned.
Of course I did some research but couldn't find the correct answer.
Here is somewhat of a duplicate: jQuery: Count number of list elements?
Use the > child selector:
$('ul.menu>li').length
Or .children():
$('ul.menu').children('li').length
The other question is in jQuery, so I answer for jquery, try this to count your li elements
var count = $('ul.menu').children('li').length;
DEMO
I created menu using fg.menu.js once its loaded I want to remove the unwanted menu for which user dont have access.
for eg:-
<ul>
<li> menu1
<ul>
<li id="8000610">Test1
</li>
<li id="20247">Test2
</li>
<li id="8000526">Test3
</li>
</ul>
</li>
</ul>
Now after loading the menu I want to remove the Test2
Thanks in advance
If you use jQuery, it's as simple as $('#20247').remove();
With vanilla JS it's
element = document.getElementById("element-id");
element.parentNode.removeChild(element);
Also, use search.
I'm having a little issue with this accordion script.
And I know why it's happening but I can't fix it. And I'm not sure it's possible to fixed it?
The accordion script i'm using is this and it's very easy to implement. http://www.i-marco.nl/weblog/jquery-accordion-menu/
The mark-up for this accordion is simple and semantic.
<ul class="menu">
<li>
Link
<ul class="acitem">
<li>PivotX</li>
<li>WordPress</li>
<li>four</li>
<li>Textpattern</li>
<li>Typo</li>
</ul>
</li>
<li>
Weblog Tools
<ul class="acitem">
<li>PivotX</li>
<li>WordPress</li>
<li>four</li>
<li>Textpattern</li>
<li>Typo</li>
</ul>
</li>
<!-- and so fourth -->
</ul>
This is the style of the markup that the script if designed to work with. And it works, see here... http://jsfiddle.net/motocomdigital/CzZqZ/1/
But my problem is because I'm working with a template that I can't change the mark-up of, see my outputted markup below.
<ul class="menu">
<ul>
<li>
Link
<ul class="acitem">
<li>PivotX</li>
<li>WordPress</li>
<li>four</li>
<li>Textpattern</li>
<li>Typo</li>
</ul>
</li>
</ul>
<ul>
<li>
Weblog Tools
<ul class="acitem">
<li>PivotX</li>
<li>WordPress</li>
<li>four</li>
<li>Textpattern</li>
<li>Typo</li>
</ul>
</li>
</ul>
</ul>
This the mark up that is outputted which is stupid.
Its outputting more than it needs to.
I've created a js fiddle for the markup above so you can see what is happening http://jsfiddle.net/motocomdigital/CzZqZ/2/
It's not closing the others when a new one is opening...
Does anyone know how to fix the script so it work like the first jsfiddle, but with the crazy markup above?
Thanks very very much if anyone can help.
Josh
Inside the click handler, change to: var parent = this.parentNode.parentNode.parentNode;. With this it works as the other example you posted.
Add the class 'noaccordian" to your "ul" elements that you want to expand/collaspse on.
Example:
<ul class="menu">
<ul class="noaccordion">
<li>
Click Here
<ul class="acitem">