This is my test HTML code:
<ul class="content">
<li class="data">
test1
<ul>
<li class="data">t1</li>
<li class="data">t2</li>
</ul>
</li>
<li class="data">
test2
<ul>
<li class="data">t3</li>
</ul>
</li>
<li class="data">
test3
<ul>
<li class="data">t4</li>
</ul>
</li>
jquery code is:
$(".content li").each(function(index, element) {
console.log(element);
});
In this function, all the li lists having class 'data' under the main ul.
But I need to iterate only the 3 parent li lists. How can I modify this jquery?
Kindly help me :)
Try to use child selecter > like,
$(".content > li").each(function(index, element) {
console.log(element);
});
in your jquery selector, add a > between .content and li..
$(".content > li").each(function (index, element) {
console.log(element);
});
> looks for immediate child instead of all childs
You can even use .children like bellow
$(".content").children('li').each(function(index, element) {
console.log(element);
});
DEMO
Related
I am designing dynatree so nodes are place in ul and li tags. the problem I am getting is I am not getting parents of clicked li element.
Here is my html code,
<ul class="bulk">
<li>gp1
<ul>
<li>gp2
<ul>
<li>gp3
<ul>
<li>c1
<li>c2
<li>c3
</ul>
<li>gp4
</ul>
</ul>
<li>gp5
<ul>
<li>gp6
<ul>
<li>gp7
<ul>
<li>c4
<ul>
<li>c5
<li>c6
</ul>
</ul>
<li>gp8
<li>gp9
</ul>
<li>gp10
</ul>
</ul>
Here is my jquery method
$('ul.bulk li').click(function(e)
{
//alert($(this).find("span.t").text());
alert(e.html());
});
Here is my fiddel http://jsfiddle.net/raghavendram040/ojnLrcjz/
The problem I am getting is if click on gp3 it alerts me 3 times, but I want if I click on gp3 it should alert its parents(gp1 and gp2). Here I place all li and ul dynamically except tag. How to achive this please help me in this
You can do something like
$(function () {
$('ul.bulk li').click(function (e) {
if($(e.target).is(this)){
$(this).parentsUntil('.bulk', 'li').each(function(){
alert(this.firstChild.nodeValue)
})
}
});
});
Demo: Fiddle
I have markup of ul and li. what I need to do is get text value from direct descentc li a text only. Expected result is a,b,c. fiddle
jquery
$(function(){
$('ul').first().find(' > li').each(function(){
alert($('a',this).text())
})
})
HTML
<ul>
<li><a>a</a>
<ul>
<li><a>a1</a></li>
<li><a>a2</a></li>
</ul>
</li>
<li><a>b</a></li>
<li><a>c</a></li>
</ul>
Use .children() instead which travels a single level down the DOM tree. Created a snippet for you:
$(function() {
$('ul').first().children('li').each(function() {
alert($(this).children('a').text())
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li><a>a</a>
<ul>
<li><a>a1</a>
</li>
<li><a>a2</a>
</li>
</ul>
</li>
<li><a>b</a>
</li>
<li><a>c</a>
</li>
</ul>
I have some extensive HTML element in the following (simplified) format:
<div id="firstdiv" class="container">
<ul>
<li id="4"> <a title="ID:4">Tree</a>
<ul>
<li id="005"> <a title="ID:005">Leaf Tree</a>
<ul>
<li id="10"> <a title="ID:10">Fruit Tree</a>
<ul>
<li id="0050338"> <a title="ID:0050338">Apple Tree</a>
<ul>
<li id="399"> <a title="ID:399">Green Apple Tree</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li id="005"> <a title="ID:005">Conifer</a>
<ul>
<li id="10"> <a title="ID:10">Pine Tree</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
I want to access the value of the title attributes of all a-tags inside the div-container with the id="firstdiv" on click.
I tried the following jQuery function but it didn't work:
$("#firstdiv").children("a").on('click', function () { /*some code here*/ });
Any ideas what I'm doing wrong?
children() only goes one deep try find()
$("#firstdiv").on('click', function () {
$(this).find('a').each(function(){
console.log($(this).attr('title'))
})
});
will get all a tags titles when the #first_div is clicked
$("#firstdiv a").on('click', function () {
console.log($(this).attr('title'))
});
will get the title of the a tag you clicked on
children() does what it says, looks at child nodes only - not descendant nodes also. For that, you need find(). However, you need neither in your case, just a change to your selector.
$('#firstdiv a')
As with CSS, a space in the selector denotes a child OR descendant.
According to the jQuery documentation
The .children() method differs from .find() in that .children() only
travels a single level down the DOM tree while .find() can traverse
down multiple levels to select descendant elements (grandchildren,
etc.) as well
So change your selector to:
$("#firstdiv").find("a").on("click", function () {});
This will search everything beneath #firstdiv in your DOM tree.
Or even:
$('#firstdiv a').click(function(){
... do stuff
});
That will select all 'a' elements within #firstdiv
Try this http://jsfiddle.net/ApfJz/22/
$("#firstdiv a").on('click', function () { alert($(this).attr('title')); });
Demo
$(document).ready(function() {
$('#firstdiv a').click(function(){
alert($(this).attr('title'))
});
});
$("#firstdiv").find("a").on('click', function () {
});
I have added the Prototype library to my site, then add the following code.when i open the page, i want to all the content in the ul are hidden.
Event.observe(window, 'load', function() {
$$('.block-category li.parent ul').hide() //why this line doesn't work
$$('.block-category li.parent > a span').each(function (element) {
element.observe('click', function (e) {
e.element().up().next('ul').toggle();
e.preventDefault();
});
});
});
html:
<div class="block block-category">
<li class="level-top parent">
<span>text one</span>
<ul> //the 1 ul
<li><a><span>....</span></a></li>
<li><a><span>....</span></a></li>
<li><a><span>....</span></a></li>
<li><a><span>....</span></a></li>
</ul>
</li>
<li class="level-top"><span>....</span></li>
<li class="level-top parent">
<span>text two</span>
<ul> //the 2 ul
<li><a><span>....</span></a></li>
</ul>
</li>
<li class="level-top parent">
<span>text three</span>
<ul>
<li><a><span>....</span></a></li>
<li><a><span>....</span></a></li>
</ul>
</li>
</div>
thank you.
The $$() method returns a list of elements that match that CSS selector - if you want to iterate over them and run the same method use the invoke() method
$$('.block-category li.parent ul').invoke('hide');
$$('.block-category li.parent ul').invoke('observe','click',function(){
alert('element was clicked');
});
If you need to do more than just run a single method use the each() method
$$('.block-category li.parent ul').each(function(item){
item.hide();
//item.update('new content');
//etc
});
Try this, seams that hide cannot applied to a set of elements directly:
$$('.block-category li.parent ul').each(function(elm) {
elm.hide();
});
I have to remove all ul within li except the current li.
<ul>
<li id="Li0">
<ul>
<li><span>Childnode1</span></li></ul>
</li>
<li id="Li1">
<ul>
<li><span>Childnode2</span></li></ul>
</li>
<li id="Li2">
<ul>
<li><span>Childnode3</span></li></ul>
</li>
<li id="Li3">
<ul>
<li><span>Childnode4</span></li></ul>
</li>
<li id="Li4">
<ul>
<li><span>Childnode5</span></li></ul>
</li>
<li id="Li5">
<ul>
<li><span>Childnode6</span></li></ul>
</li>
</ul>
So If i click on the li with id 'li4' every other li that are previous to this li or next to this li should have there ul to be removed from dom.
I was thinking of using the .not operator in jquery but till now not able to do this.
is that what you are searching for?
$(function(){
$('li').click(function(){
$(this).siblings().children("ul").remove();
});
});
Demo: http://jsfiddle.net/wwvBL/
$('li').on('click',function(){
var obj= $(this);
id= obj.attr('id');
obj.parent().find('li:not(#'+id+') > ul').remove();
})
This should help.
$(function () {
$('ul:first').delegate("li[id^='L']", 'click', function () {
$("ul:first > li[id!='"+$(this).attr('id')+"'] > ul").remove();
});
});
Demo: http://jsfiddle.net/EJWnn/
Use siblings to find all other adjacent elements:
$("li").click(function() {
$(this).siblings().find("ul").remove();
});
You might want to have a more specific selector than "li".