I am trying to get the parent <li> when I click on a specific <li> item.
http://jsfiddle.net/doonot/GjbZk/
So let's say I click on submodule 1, I get the clicked ID with $(this).attr('id');
How can I now get the ID of the parent <li> which is in this case module 1?
Please note that my tree is quite big, so it has to be flexible.
Thanks a lot, much appreciate your answer.
You can use the closest method to get the first ancestor that matches a selector:
var li = $(this).closest("li");
From the jQuery docs:
Get the first element that matches the selector, beginning at the
current element and progressing up through the DOM tree.
var parentModule = $('this') //the selector of your span
.parents('li:eq(1)') //get the next li parent, not the direct li
.children('.rightclickarea:first') //get the first element, which would be the span
.attr('id') //get the span id
var parent = $(this).closest("li");
Related
I have this code:
var toLoad = $('.sidebar').find('.active').next('li.list-element').attr('data-id');
Which should detect the next element after my .active with list-element class. It doesn't. The problem is, I have a list like this:
<li class="list-element active">...</li>
<li class="list-element">...</li>
<li class="ads">...</li>
<li class="list-element">...</li>
<li class="list-element">...</li>
And when I get to ads, my script stops. What can I do?
.next() will only target the next element. You need to use .nextAll() along with :first or :eq(0) to target the next first sibling with the required class:
var toLoad = $('.sidebar').find('.active').nextAll('li.list-element:first').attr('data-id')
The problem is your understanding of the .next() method is wrong, it does not return the element element matching the selector, it will return the next sibling element only if it matches the passed selector
One easy solution is to find all the next elements then use the first one in the set
var toLoad = $('.sidebar').find('.active').nextAll('li.list-element:eq(0)').attr('data-id');
Jquery next()
Get the immediately following sibling of each element in the set of
matched elements. If a selector is provided, it retrieves the next
sibling only if it matches that selector.
So, when you write
$('.sidebar').find('.active')
That will find one element, the li with the class active and .next() can only select from within that group.
You could, however, use just one CSS selector to find the next element from the .active one like so:
$('.sidebar .active ~ li.list-element:first').attr('data-id')
~ is the general sibling selector that matches elements that are after the original element (.active) and share a parent (.sidebar).
I have parent div id, this parent have 3 children, each child have their own children. This is tree like structure. What I want is select to select second child on level one.
currently i am doing like this
var Second_child = $('#Parent_id:nth-child(2)');
But it is not selecting the child. I don't want to use eq() function.
You need to use child selector here
var Second_child = $('#Parent_id > :nth-child(2)');
If you use descendant selector 2nd child in every level will get selected
Your selector tries to find an element with id Parent_id which is the second child of its parent
Say if I have the following html:
<a href="some url" class="product-store-name">
azzaharastore
</a>
and this html is contained inside another div, and another div, of x levels. Is there a way to find the div that has the data-id in it and then get the value of it? In other words I want a function that propates upwards and find the data-id in it.
You can use .closest() along with has attribute selector to find the desired element
if this refers to this element then use(replace this with any other means to refer the target element)
var $div = $(this).closest('div[data-id]');
var did = $div.data('id');
or for the above said case
var did = $('.product-store-name').closest('div[data-id]').data('id')
Demo: Fiddle
I have some HTML blocks look like
<li id="item261">
<div class="itemdesc">
<a class="icon-hide">Hide</a>
</div>
</li>
And i have a jquery like
$(document).ready(function()
{
$('.icon-hide').click(function(){
var elemId = $(this).parent().attr("id");
});
});
I need the ID of the "li" tag on click of ".icon-hide". how can i achive this? any help..
I'd suggest:
$('.icon-hide').click(function(){
var elemId = $(this).closest('li').attr('id');
});
This is because parent() as implied in the name of the method looks at the parent of the element returned by the selector (the parent is the div); whereas closest() continues up the ancestor tree to match the first selector passed to the method.
You could, instead, use parents(), however the important difference between closest() and parents() is that closest() returns zero or one match, whereas parents() will continue all the way to the root element and return every match it finds, so it can return zero, one or many matches.
Another difference is that parents() starts searching from the current element's parent, whereas closest() starts with the current element itself, so it's quite easily possible, using closest() for the method to return the current/$(this) element itself.
References:
closest().
parent().
parents().
$(this).closest('li[id]').attr('id')
i want to know how to get Unorderedlist's first child className. I know the UL's ID. How can i find it with jQuery?
Thanks in Advance!!
Give this a try:
$("#id li:first").attr("class");
where id=the UL's ID.
$('#list > li:first').attr('class')
#troynt made a valuable addition, adding the > in between the id of the ul and the li:first makes sure you only grab the first child of the ul you're targeting and not any li's within the child li's.
This will assure that you only get the first class name of the child LI, if there are multiple class names:
$('#id > li:first').attr('class').split(" ")[0]
That takes the class attribute, splits the string by spaces and returns the first element in the resulting array. If there is only one class name, it'll still work as expected.
$("#ULID li:first").attr("class");
Also, keep in mind that your element can potentially have more than one class.