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.
Related
i have dynamic ul li nodes that make tree and i want to remove all child span nodes which have
class="highlight" or
class="add_action" or
class="delete_action" or
class="edit_action"
under specfic li with specfic id -(in this example 20 )- i tried this code with jquery to find all span with theses classes to remove it but it didnt worked
$('li#20').find('span.add_action').each(function(){
$(this).remove();
});
also tired
$('li#20').eq(0).find('.add_action').remove();
$('li#20').children('.add_action').remove();
this the full example
https://jsfiddle.net/kqagjtmr/
You have duplicate id attributes in your code, for example:
<li class="thide" id="20"><span class="vertical"></span>
<span id="20" class="first_name" title="">الجد سعد</span>
This is why $('li#20') doesn't work properly. id attributes must be unique, and shouldn't start with a number, either. Use classes instead.
To remove elements, simply use:
$('someSelector').remove();
Also, you should include jQuery in your fiddle, you can find the option here:
Get all the span elements having the specified class and remove all of those. No need of using each to looping. Use the span elements comma-separated to select all the matching elements.
$('li#20')
.find('span.highlight, span.add_action, span.delete_action, span.edit_action')
.remove();
DEMO
See the updated fiddle : "https://jsfiddle.net/kqagjtmr/1/"
Use $('li#20').find("highlight add_action delete_action edit_action").remove();
to find multiple elements at once and remove them.
I have this part of HTML:
<div id="menu">
<ul>
<li>Startseite</li>
<li class="active">Brillengläser</li>
<li>Komplettbrille</li>
<li>Sportbrillen</li>
<li>Marketing</li>
<li>Statistik</li>
</ul>
</div>
I want to remove class="active" parameter and set it in li tag where I have href="/pacmodule/completeglass" atribute.
First part I successfully done with jquery:
$("#menu").find("ul:first").find(".active").removeClass("active");
But I have problems with second part. This select just a tag:
$('a[href="/pacmodule/completeglass"]').parent().html();
And this all ul tag:
$('a[href="/pacmodule/completeglass"]').parent().parent().html();
How can I set class="active" attribute in li tag where href="/pacmodule/completeglass"
Thank you for help.
You do not need the html() calls. They just return the innerHTML as a string. You probably expected that would return the outerHTML (for the outerHTML use something like ...parent()[0].outerHTML)
Try this:
$('a[href="/pacmodule/completeglass"]').closest('li').addClass('active');
It will find the anchor based on the href = "/pacmodule/completeglass", then find the closest ancestor that is an LI, then add the class active to it.
closest is the most useful way to find an ancestor of a specific type. It is better than using parent() as closest copes with the HTML structure changing.
Note: If you explain the overall aim, there may be better ways to do this than searching for the link href :)
Update
You do not want to remove the previous selection with this as it is too specific:
$("#menu").find("ul:first").find(".active").removeClass("active");
try this instead:
$("#menu li.active").removeClass("active");
.closest()
$("li").removeClass("active").find($('a[href="/pacmodule/completeglass"]')).closest('li').addClass('active');
DEMO
Easily do this (into your js document):
$("#menu li").removeClass("active");
$('a[href="/pacmodule/completeglass"]').parent().addClass("active");
$("#menu").find("ul:first").find(".active").removeClass("active");
This can be made more effective writing it as:
$("#menu").find("li.active").removeClass("active");
Then the DOM dont need to search for any ul, instead it goes directly to the class .active
why don't you try this :
$("#menu").find("ul:first").find(".active").removeClass("active");
$('a[href="/pacmodule/completeglass"]').parent().addClass("active");
you might wanna check this fiddle
For example, I've got a selector here
var $myNeeds = $('.history');
This selector would have multiple divs inside, and now I want to get the last child from it, how to do this?
I tried $myNeeds.last(), this won't work!
Alternatively....
$myNeeds.find('>:last-child')
jsFiddle.
You're almost there...
$myNeeds.children().last()
The last method gets the last element in your set.
You want the last child of your set, so you need to get a new set with the children.
You could also write
$('.history > :last-child')
or
$myNeeds.children(":last")
I have the following code:
$('#select_albums').load(document.location.href + "&action=get_albums");
But this is only replacing only the first found div with the id #select_albums from DOM. How do I replace all divs with an id?
Every item in the DOM has a unique id. If you want to act on many divs at the same time use a class $(".myclass") or a tag $("div") selector.
Yes because by definition an element ID can only appear once on a page. If you have more elements use a class instead.
$('.select_albums').load(document.location.href + "&action=get_albums");
With
<div class="select_albums"></div>
<div class="select_albums"></div>
id's must be unique, try using a class instead such as $(".albums").load...
ids must be unique
<div id="dad">
<img id="mum">
<input>
</div>
With jQuery, how could i get access to the input element, get is value or set it for example? I can't work out how to access something on the same level.. and i dont want to be using ID's, just parent/child nodes so i can use the code for loads of dad div's
Thanks!
an addition to Zed,
$(this).parent().children('input');
if you give a name to your input field then you can easily select throughout the others,
$(this).parent().children('input[name=my_input]');
then you can give any value as:
$(this).parent().children('input[name=my_input]').val('any value');
Sinan.
var myEl = $("#dad").children(":input");
$(this).parent().children() ?
Try this, to find the first child input element:
jQuery("div").find("input:first")
If i understand question, you would like achieve input from mum leve?
So try $("#mum ~ input")...
BTW, great site to search jquery function by category http://visualjquery.com/ +nice example.
I guess you want to find siblings (node with same depth and same parent and in DOM tree)
$(el).next() - next element (sibling) for all elements in the set
$(el).nextAll - all following siblings
$(el).nextUntil - all following siblings, stop on some condition (not including first "bad match").
Besides, you have next adjacent selector (+) and next sibling selector.
The same about prev, prevAll and prevUntil.
And you even have a siblings method.
Check this out.