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');
Related
I have nested lists draw in run time dynamic from database in away like this :
<div class="list"><ul>
<li>
listA
<ul>
<li>Alist1</li>
<li>Alist2</li>
<li>Alist3</li>
</ul>
</li>
<li>
listB
<ul>
<li>BList1</li>
<li>BList2</li>
<li>BList3</li>
</ul>
</li>
i want to change the back ground of list item when clicked but it change style of the all nested list by the following method :
var $li = $('#list li').click(function () {
$li.removeClass('selected');
$(this).addClass('selected');
});
using this style :
li.selected {
background-color: aqua;}
I know that i should use the direct descendant operator (>) to force change to parent only but my problem that list is drawn dynamically and I can't limit its levels and nested list.
is there away to always force only clicked item to be changed only ?
1- You can't use #list while your list have a class list not id list with classes you need to use dot not #
2- You need to use > like $('.list > ul > li')
$(document).ready(function(){
$('ul > li').on('click' , function(e){
e.stopPropagation();
//$('li > ul').hide();
$(this).find(' > ul').slideDown();
$(this).parent('ul').find('li').removeClass('selected');
$(this).addClass('selected');
});
});
ul{
background : #fff;
}
li > ul{
display : none;
}
li.selected{
background : red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list">
<ul>
<li>
listA
<ul>
<li>Alist1
<ul>
<li>Alist1-1</li>
<li>Alist1-2</li>
<li>Alist1-3</li>
</ul>
</li>
<li>Alist2</li>
<li>Alist3</li>
</ul>
</li>
<li>
listB
<ul>
<li>BList1</li>
<li>BList2</li>
<li>BList3</li>
</ul>
</li>
</ul>
</div>
-- It'll be better to work with <a> see the next example
$(document).ready(function(){
$('a').on('click' , function(e){
e.preventDefault();
var GetLi = $(this).closest('li');
var GetBigUL = $(this).closest('ul');
var GetNextUL = $(this).next('ul');
GetBigUL.find('a').next('ul').not(GetNextUL).slideUp();
GetNextUL.slideDown();
GetBigUL.find('li').removeClass('selected');
GetLi.addClass('selected');
});
});
ul{
background : #fff;
}
li > ul{
display : none;
}
li.selected{
background : red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list">
<ul>
<li>
<a>listA</a>
<ul>
<li>
<a>Alist1</a>
<ul>
<li><a>Alist1-1</a></li>
<li><a>Alist1-2</a></li>
<li><a>Alist1-3</a></li>
</ul>
</li>
<li><a>Alist2</a></li>
<li><a>Alist3</a></li>
</ul>
</li>
<li>
<a>listB</a>
<ul>
<li><a>BList1</a></li>
<li><a>BList2</a></li>
<li><a>BList3</a></li>
</ul>
</li>
</ul>
</div>
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());
}
})
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();
});
});
<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>