With Jquery, I am trying to add a clone element and remove the previously added element. Adding a clone element is working but removing the previously added element is not working (it removes all the clone elements). I am using "not()" function but it is not filtering as I want it to.
I searched through the web but could not find a solution so your help will be greatly appreciated!
--HTML--
<div id="clone-container">
<!--cloned element comes here-->
</div>
<div id="original-container">
<ul>
<li>
<span>Value1</span>
</li>
<li>
<span>Value2</span>
</li>
<li>
<span>Value3</span>
</li>
</ul>
</div>
--Jquery--
$(document).ready(function(){
$('#original-container > ul > li').click(function(event){
//for adding clone elements
var $selected_clone = $(this).children("span").clone();
$selected_clone.appendTo("#clone-container > ul > li");
// for removing previously added elements
$("#clone-container > ul > li > span").not($selected_clone).remove();
});
});
Remove the appendTo code execution and replace below
$("#clone-container > ul > li > span").not($selected_clone).remove();
with
$("#clone-container > ul > li > span").html($selected_clone.html());
Hope this will help !!
Check this out.. http://jsbin.com/uZij/1/
HTML
<div id="clone-container">
<ul>
</ul>
<!--cloned element comes here-->
</div>
<div id="original-container">
<ul>
<li>
<span>Value1</span>
</li>
<li>
<span>Value2</span>
</li>
<li>
<span>Value3</span>
</li>
</ul>
</div>
jQuery
$(document).ready(function(){
$('#original-container > ul > li').click(function(event){
//for adding clone elements
var $selected_clone = $(this).clone();
$selected_clone.appendTo("#clone-container > ul");
// for removing previously added elements
$("#clone-container > ul > li").not($selected_clone).remove();
});
});
Related
Because mobile devices do not have a hover state, I am trying to remove the links on the first il elements every time these have children, and clone them as children of themselves (with link).
<ul id="menu-header-menu">
<!--this li has children so link should be removed -->
<li class="menu-item-has-children">Portfolio
<ul class="sub-menu">
<li>Painting</li>
<li>Video</li>
</ul>
</li>
<!--this li doesn't have children so link should NOT be removed -->
<li>About</li>
</ul>
And I want to do the same in the footer menu:
<ul id="menu-footer-menu">
<!--this li has children so link should be removed -->
<li class="menu-item-has-children">Links
<ul class="sub-menu">
<li>Documents</li>
<li>Extra</li>
<li>Photos</li>
</ul>
</li>
<!--this li doesn't have children so link should NOT be removed -->
<li>Contact</li>
</ul>
I am generating this html structure through php on a WordPress website so I am trying to avoid element ID's.
I am trying this jQuery script, but it clones both li onto both menus (header and footer) so I end up with two clones of each, one in each menu.
if($(window).width() <= 980){
$('ul#menu-footer-menu').each(function() {
$(this).find('a:first').clone().appendTo( "ul.sub-menu" );
$(this).find('a:first').contents().unwrap();
});
$('ul#menu-header-menu').each(function() {
$(this).find('a:first').clone().appendTo( "ul.sub-menu" );
$(this).find('a:first').contents().unwrap();
});
}
Could give me a hand?
Ok, got it. I just needed to target the right place to append the cloned li.
if($(window).width() <= 980){
$('ul#menu-footer-menu').each(function() {
$(this).find('a:first').clone().appendTo( "ul#menu-footer-menu > li.menu-item-has-children > ul.sub-menu" );
$(this).find('a:first').contents().unwrap();
});
$('ul#menu-header-menu').each(function() {
$(this).find('a:first').clone().appendTo( "ul#menu-header-menu > li.menu-item-has-children > ul.sub-menu" );
$(this).find('a:first').contents().unwrap();
});
}
I need to acces an element that has a certain style.
This is my structure
<ul>
<li> Hi </li>
<li> bye </li>
<li> third one </li>
</ul>
The list items are placed on top of each other (last one first) and I can dislike something or like something. Once I do that, it gets a style display:none like following:
<ul>
<li> Hi </li>
<li> bye </li>
<li style:"display:none;"> third one </li>
</ul>
Now after I did that I want to be able to acces the last element that does not have display:none, (the bye) how can I do this?
I was thinking of something in the form of:
var myId = $("#slider > ul li").last().attr("id");
But obviously I always get the ID of the item that is hidden since its still there.
Can I do something like select last where !display:hidden ?
Can I do something like select last where !display:hidden ?
Yes, with jQuery's :visible pseudo-class:
var myId = $("#slider > ul li:visible").last().attr("id");
(Note: Your li elements don't actually have id values, but that's a tweak.)
Live Example:
var listItem = $("#slider > ul li:visible").last();
$("<p>")
.text("Text of last visible item: " + listItem.text())
.appendTo(document.body);
<div id="slider">
<ul>
<li>Hi</li>
<li>bye</li>
<li style="display:none;">third one</li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Can use ':visible' selector
var myId = $("#slider > ul li:visible").last().attr("id");
It should work using:
$("#slider > ul li:visible").last().attr("id");
https://api.jquery.com/visible-selector/
so your inline styling is a bit off it should be
<ul>
<li> Hi </li>
<li> bye </li>
<li style="display:none;"> third one </li>
</ul>
You could do a few different things, best is probably just iterate through and check for where display = none, then go to the previous element:
$('ul').children().each(function(e) {
if($(this)[0].style.display == 'none') {
console.log($(this).prev());
}
})
<ul id="nav">
<li>
Home
</li>
<li>
About
<ul>
<li>The product
<ul> // level 2
<li>x3</li>
<li>x4</li>
</ul>
</li>
<li>Meet the team
<ul> // level 2
<li>x1</li>
<li>x2</li>
</ul></li>
</ul>
</li>
</ul>
using jquery i wanted to select ul of level 2
like if i hover on 'The product' then i want to select only ul[level 2] that is next to it not all level 2 ul.
I use jQuery code to select like this
$('#nav li ul li').mouseover(function(){
$(this).children('ul').css('opacity','.5');
});
but this code effect on both level 2 ul i want to select the ul that is inside that <li> which is hover...
Try this using Child combinator selector:
$('#nav > li > ul > li').mouseover(function(){
$(this).children('ul').css('opacity','.5');
});
This means it will only select list items that are direct children of an unordered list. In other words, it only looks one level down the markup structure, no deeper.
Can do with CSS:
jsfiddle demo
#nav > li > ul > li:hover > ul {opacity:.5;}
I've html like this. I want to only show first li tags and don't want to show span. How to do this with jquery?
<div id="div1">
<ul class="class2">
<li class="class3"><span class="sfBreadcrumbNodeSeparator">/</span> </li>
<li class="class3"> </li>
<li class="class3"> </li>
</ul>
</div>
$('.class2 li').not(':first').hide(); will hide all but the first list items, $('.class2 li:first span').hide(); will hide the span. See http://jsfiddle.net/jhfrench/agga6/4/.
Or you can do it all in one line using $('.class2 li:not(":first")' || '.class2 li:first span').hide();. See http://jsfiddle.net/jhfrench/agga6/5/
If you just want to hide the span, you can do
$('.sfBreadcrumbNodeSeparator').hide()
or give it an id value in the markup, and select based on the id value.
Hi You can use this.
$('.sfBreadcrumbNodeSeparator').hide();
or this for first li of ul
$('.class2 li:first span').hide();
You can try :
<script>
$('div#div1 ul li:first-child span').hide();
</script>
I am trying to select only the first children under Sally. Using JavaScript, how would I select Car, Boat, & Bike and change the font color to red?
<script type="text/javascript">
$(document).ready(function() {
var j = jQuery.noConflict();
j('#content2 ul li ul').children().css('color', '#ff0000');
});
</script>
<div id="content2">
<div>
<div>
<ul>
<li>Bob</li>
<li>Sally
<ul>
<li>Car</li>
<li>Boat</li>
<li>Bike
<ul>
<li>Red</li>
<li>Green</li>
<li>Blue</li>
</ul>
</li>
</ul>
</li>
<li>Larry</li>
<li>Mo</li>
</ul>
</div>
</div>
</div>
querySelectorAll will select elements based on a CSS selector, so one way would be:
var elements = document.querySelector('#content2 > div > div > ul > li > ul > li');
Oh, you've got jQuery. Then you just need to be a little more specific, because descendants will be matched by default:
j('#content2 > div > div > ul > li > ul > li').css('color', 'red');