I need to .Clone each a to inside the next elment which is ul
How can i do that ?
<ul>
<li>
<a>link<a>
<ul></ul>
<li>
<li>
<a>link<a>
<ul></ul>
<li>
<li>
<a>link<a>
<ul></ul>
<li>
<li>
<a>link<a>
<ul></ul>
<li>
</ul>
I have tried:
$("a").each(function () {
$(this).clone().insertAfter(this).find('ul');
});
The problem is i get the new cloned elment just beside the original one, i wish to insert it inside the next ul elment
thanks
You need to find the next list, then append the cloned element. I also fixed your invalid HTML:
$("a").each(function() {
$(this).next("ul").append($(this).clone(true));
});
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<ul>
<li><a>link</a>
<ul></ul>
</li>
<li><a>link</a>
<ul></ul>
</li>
<li><a>link</a>
<ul></ul>
</li>
<li><a>link</a>
<ul></ul>
</li>
</ul>
Valid HTML requires that <ul> can only have <li> as a direct descendant (child). A <li> can have anything within itself, but it needs to end properly with a </li>. The demo follows the following pattern:
<ul><!------------------------------Main List-->
<li><!----------------------------List Item-->
<a href='#/'>LINK 1</a><!---Original Link-->
<ul><!------------------------Target List-->
<li><!--------------------New List Item-->
<a href='#/'>LINK 1</a><!--Clone Link-->
</li>
</ul>
</li>
...
</ul>
Demo
/*
.each() <a>
Create a .clone() of current <a>
Find .next() <ul>
.append() the clone to <ul>
.wrapInner() of <ul> with a <li>
*/
$("a").each(function() {
var dupe = $(this).clone(true, true);
$(this).next('ul').append(dupe).wrapInner(`<li></li>`);
});
<ul>
<li>
<a href='#/'>LINK 1</a>
<ul></ul>
</li>
<li>
<a href='#/'>LINK 2</a>
<ul></ul>
</li>
<li>
<a href='#/'>LINK 3</a>
<ul></ul>
</li>
<li>
<a href='#/'>LINK 4</a>
<ul></ul>
</li>
</ul>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Related
I'm trying to console log a variable that should contain an array. However, in Codepen, it returns an empty array. I'm expecting it to return contents of the list item.
Here's the Codepen along w/ some snippet code:
This is a React project, btw, which is why I'm using className instead of class.
HTML
<ul className="nav">
<li>
<a>Products</a>
<div className="subnav-block">
<ul>
<li>
<a>Product A</a>
</li>
<li>
<a>Product B</a>
</li>
</ul>
</div>
</li>
<li>
<a>About</a>
<div className="subnav-block">
<ul>
<li>
<a>About Us</a>
</li>
<li>
<a>Press</a>
</li>
</ul>
</div>
</li>
</ul>
JS
const nav = document.querySelectorAll('.nav > li');
console.log(nav)
Codepen is returning:
[Object NodeList] {Length: 0}
Because className isn't how you add a HTML class - it's simply class.
const nav = document.querySelectorAll(".nav > li");
console.log(nav);
<ul class="nav">
<li>
<a>Products</a>
<div class="subnav-block">
<ul>
<li>
<a>Product A</a>
</li>
<li>
<a>Product B</a>
</li>
</ul>
</div>
</li>
<li>
<a>About</a>
<div class="subnav-block">
<ul>
<li>
<a>About Us</a>
</li>
<li>
<a>Press</a>
</li>
</ul>
</div>
</li>
</ul>
To keep using className, use an attribute selector:
const nav = document.querySelectorAll("[className='nav'] > li");
console.log(nav);
<ul className="nav">
<li>
<a>Products</a>
<div className="subnav-block">
<ul>
<li>
<a>Product A</a>
</li>
<li>
<a>Product B</a>
</li>
</ul>
</div>
</li>
<li>
<a>About</a>
<div className="subnav-block">
<ul>
<li>
<a>About Us</a>
</li>
<li>
<a>Press</a>
</li>
</ul>
</div>
</li>
</ul>
If this is in a react app make sure you are calling the code in the correct place so that the dom has actually been updated with your markup before the query is being called. If you are using a class component move your code inside componentDidMount
componentDidMount() {
const nav = document.querySelectorAll(".nav > li");
console.log(nav);
}
If you are using hooks place it inside useEffect
useEffect(() => {
const nav = document.querySelectorAll('.nav > li')
console.log(nav)
}, [])
here is a working example using hooks: https://codesandbox.io/s/currying-monad-t6104?fontsize=14
I create submenu and I need to get value of direct parent for Submenu"li"
this is my code
<div class="box">
<div class="col-sm-6">
<!-- main menu-->
<ul>
<li class="m-sub">
Cars
<!-- sub menu for cars-->
<ul class="sub">
<li> Audi</li>
<li> KiA</li>
</ul>
</li>
<li class="m-sub">
Tablets
<!--start sub menu for tablet -->
<ul class="sub">
<li> Phone</li>
<li> Sony</li>
</ul>
</li>
<li> Laptop</li>
<li> Glass </li>
</ul>
</div>
</div>
I need to get direct parent of sony for example, when I use ($(this).parent()).text() the result was phone not tablet.
I need to get value of parent "tablet" ,when select Audi i need to get cars
thanks in advance.
Tablets isn't inside the direct parent of your list item; you'll need a bit more jQuery:
var li = $('.sub > li')
console.log(
li.closest('.m-sub').contents().eq(2).text().trim() //=> 'Tablets'
)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="m-sub">
<span><i class="icon-tablet"></i></span> Tablets <span class="leftarr"><i class="icon-chevron-right"></i></span>
<ul class="sub">
<li> Phone
</li>
<li> Sony
</li>
</ul>
</li>
<li> Laptop
</li>
<li> Glass
</li>
</ul>
So, guys, basically what I need to find:
----> All <li> which has <ul> without ANY class.
In this example I would ONLY want the <li> parent of the commented <ul>:
HTML
<ul id="myList">
<li>
<a>Item 1</a>
<ul class="someClass">
</ul>
</li>
<li> <!--------- Just Need This One ---------->
<a>Item 2</a>
<ul>
</ul>
</li>
<li>
<a>Item 3</a>
<ul class="justAnotherClass">
</ul>
</li>
</ul>
I'm aware of .not("[class]"), and so I tried something like:
$('#myList li').has('ul').not("[class]")
which obviously doesn't work because jQuery is looking for <li>'s which have a nested <ul> but doesn't have any class.
So, guys, can anyone please help? :)
Instead of using
$('#myList li').has('ul').not("[class]")
you can use
$('#myList > li').has('ul:not([class])')
you can also use this selector
$('#myList > li:has(ul:not([class]))')
$('#myList > li:has(ul:not([class]))').css('background' , 'red');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="myList">
<li>
<a>Item 1</a>
<ul class="someClass">
</ul>
</li>
<li>
<a>Item 2</a>
<ul> <!--------- Just Need This One ---------->
</ul>
</li>
<li>
<a>Item 3</a>
<ul class="justAnotherClass">
</ul>
</li>
</ul>
Use filter() over li and then check for children ul without any class with .length,
$('#myList li').filter(function(){
return $('ul:not([class])',this).length > 0 //$('child','context') selector
//or $('> ul:not([class])',this) in case of direct <ul>
});
var $li = $('#myList li').filter(function(){
return $('ul:not([class])',this).length > 0 //$('child','context') selector
});
console.log($li)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul id="myList">
<li>
<a>Item 1</a>
<ul class="someClass">
</ul>
</li>
<li>
<a>Item 2</a>
<ul> <!--------- Just Need This One ---------->
</ul>
</li>
<li>
<a>Item 3</a>
<ul class="justAnotherClass">
</ul>
</li>
</ul>
Try $('#myList li ul').filter(':not([class])'):
console.log($('#myList li ul').filter(':not([class])').html());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<ul id="myList">
<li>
<a>Item 1</a>
<ul class="someClass">
</ul>
</li>
<li>
<a>Item 2</a>
<ul> <!--------- Just Need This One ---------->
</ul>
</li>
<li>
<a>Item 3</a>
<ul class="justAnotherClass">
</ul>
</li>
</ul>
I really hate that 'too short to be an answer' ....
$('#myList li > ul:not([class])')
Seems to be the simplest one that does the job ?
is there any easy way to add Li from jquery in below structure
<div id="ctl00_g_d75240ee_258b_420a_b571_2b97dcda8a66" >
<ol class="top-menu-bar pull-right">
<li>
<a id="ctl00_g_d75240ee_258b_420a_b571_2b97dcda8a66_lbLanguage" href="/ar/">Test</a>
</li>
<li>
<a id="ctl00_g_d75240ee_258b_420a_b571_2b97dcda8a66_lbSitemap" href="/en/sitemap">Sitemap</a>
</li>
<li>
<a id="ctl00_g_d75240ee_258b_420a_b571_2b97dcda8a66_lbContact" href="/en/contact-us?tab=2">Contact</a>
</li>
<li>
<a id="ctl00_g_d75240ee_258b_420a_b571_2b97dcda8a66_lbFaq" href="/en/contact-us?tab=3">FAQ</a>
</li>
</ol>
</div>
i want to add below li after FAQ
<li>
<a id="ctl00_g_d75240ee_258b_420a_b571_2b97dcda8a66_lbFaq" href="/en/contact-us?tab=3">FAQ</a>
</li>
I have tried below but it is addind in all li's
$("#ctl00_g_d75240ee_258b_420a_b571_2b97dcda8a66 li").last().html('<li> Menu 5 </li>');
Use after() to insert after an element
$("#ctl00_g_d75240ee_258b_420a_b571_2b97dcda8a66 li").last().after('<li> Menu 5 </li>');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="ctl00_g_d75240ee_258b_420a_b571_2b97dcda8a66">
<ol class="top-menu-bar pull-right">
<li>
<a id="ctl00_g_d75240ee_258b_420a_b571_2b97dcda8a66_lbLanguage" href="/ar/">Test</a>
</li>
<li>
<a id="ctl00_g_d75240ee_258b_420a_b571_2b97dcda8a66_lbSitemap" href="/en/sitemap">Sitemap</a>
</li>
<li>
<a id="ctl00_g_d75240ee_258b_420a_b571_2b97dcda8a66_lbContact" href="/en/contact-us?tab=2">Contact</a>
</li>
<li>
<a id="ctl00_g_d75240ee_258b_420a_b571_2b97dcda8a66_lbFaq" href="/en/contact-us?tab=3">FAQ</a>
</li>
</ol>
</div>
or you can use append() for appending content
$("#ctl00_g_d75240ee_258b_420a_b571_2b97dcda8a66 ol").append('<li> Menu 5 </li>');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="ctl00_g_d75240ee_258b_420a_b571_2b97dcda8a66">
<ol class="top-menu-bar pull-right">
<li>
<a id="ctl00_g_d75240ee_258b_420a_b571_2b97dcda8a66_lbLanguage" href="/ar/">Test</a>
</li>
<li>
<a id="ctl00_g_d75240ee_258b_420a_b571_2b97dcda8a66_lbSitemap" href="/en/sitemap">Sitemap</a>
</li>
<li>
<a id="ctl00_g_d75240ee_258b_420a_b571_2b97dcda8a66_lbContact" href="/en/contact-us?tab=2">Contact</a>
</li>
<li>
<a id="ctl00_g_d75240ee_258b_420a_b571_2b97dcda8a66_lbFaq" href="/en/contact-us?tab=3">FAQ</a>
</li>
</ol>
</div>
Use the After() method of JQuery:
$("#ctl00_g_d75240ee_258b_420a_b571_2b97dcda8a66 li").last().after('<li> Menu 5 </li>');
Here is Fiddle for that.
I am new to javascript, forgive me asking the simple question.
Is there anyone could guide me how to use javascript to dynamically list different things when clicking different button.
For example: Like this link:
when I click the Brand development, ecommerce development, it will list all related items.
I create an example on jsFiddle, please check from here
The HTML content is like:
<ul class='product-catlogs'>
<li><a class='product'>All</a>
</li>
<li><a class='books'>Books</a>
</li>
<li><a class='mobiles'>Mobiles</a>
</li>
<li><a class='cars'>Cars</a>
</li>
<ul class='product-list'>
<li>
<div class='product books'>book1</div>
</li>
<li>
<div class='product books'>book2</div>
</li>
<li>
<div class='product books'>book3</div>
</li>
<li>
<div class='product mobiles'>Iphone</div>
</li>
<li>
<div class='product mobiles'>Sumsang</div>
</li>
<li>
<div class='product cars'>Mercedes</div>
</li>
<li>
<div class='product cars'>Toyota</div>
</li>
<li>
<div class='product cars'>Ford</div>
</li>
The js code is like:
$('.product-catlogs a').click(function (e) {
var tag = this.className;
$('ul li .' + tag).parent().show();
$('ul li div').not('.' + tag).parent().hide();
})