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.
Related
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 have a recursive list (tree) and each element has a #click="sayHello(el.id)". Now the problem is, since it is a nested list like:
list-element-0-01
├──list-el-1-01
│ └──list-el-2-01
└──list-el-1-02
└──list-el-2-02
If I click the element: list-el-2-01 then I get the output of
> "list-el-2-01"
> "list-el-1-01"
> "list-el-0-01"
In exact that order. I mean I get it, looking at the html:
<ul>
<li #click="sayHello('list-el-0-01')"> one-one
<ul>
<li #click="sayHello('list-el-1-01')"> two-one
<ul>
<li #click="sayHello('list-el-2-01')"> three-one </li> // I click this
</ul>
</li>
<li #click="sayHello('list-el-1-02')"> two-two
<ul>
<li #click="sayHello('list-el-2-02')"> three-two </li>
</ul>
</li>
</ul>
</li>
</ul>
It makes sense that I am also clicking all the wrapping elements, somehow. My question - is there a way to only have the exact element fire it's click event?
You can stop propogation using the .stop event modifier as:
#click.stop="sayHello"
Now the event won't be propagated to the parent
More on the list of event modifiers: https://v2.vuejs.org/v2/guide/events.html#Event-Modifiers
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
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">