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.
Related
I have the following markup
<div class = "general">
<div id ="custom"></div>
</div>
How to change id = "custom" in all <div> with class="general" from href on page using jQuery?
You can try this:
$("div.general").each(function() {
$(this).children("div#custom").text($(this).children("a").attr("href"));
});
If I understand you correctly, you want to iterate through all div.generals, and change the text of each child div#custom to the href of the child a.
See a working example on JSfiddle.
Also, another tip is to avoid using multiple elements with the same id. In your code you have a <div> with id="custom". You also say that the div.general appears multiple times — therefore, the id "custom" will appear multiple times. This is bad practice. I suggest that you change id to class.
You need to loop through all div.general and replace the id attribute of div#custom to whatever is there as the anchors href property. The following code will work:
$(".general").each(function(){
$(this).find("#custom").attr("id", $(this).find("a").attr("href").replace("#", ""));
})
Here the .find() will dig out elements from any depth inside the parent. If you are sure about the DOM position of the elements, you can change the .find() to .children()
I want to hide all elements except for an element with a specific class AND all elements inside this.
right now im using
$("body").not(".embedded").hide();
But it also hides the elements inside my .embedded element.
I appreciate every help.
Use * and space to indicate all direct/nested children. Also, for the initial selector, use body * to indicate all children before the not() filtering
$("body *").not(".embedded, .embedded *").hide();
Here you are:
$('body :not(".class2")').hide();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="class1">11111</span>
<span class="class2">
10
<span class="class21">11</span>
<span>12</span></span>
<span class="class1">11111</span>
Hope this helps.
I'm trying to implement the jQuery toggle item in my Rails 3.2.1 app.
I would like the toggle to work for each individual <li> item on the <ul>, so I can target which element to hide/show individually. But for some reason, only the top element has the toggle effect; the rest are not responding.
Here's the jsFiddle.
Can anyone explain why this is happening?
It’s because your divs all have the same id, which is invalid HTML. Since the DOM is only expecting there to be one element with any given ID, then when you write $("#trigger"), it only selects the first one it finds. Change the ID to a class.
<div class="trigger"> ...
And change your ID selector to a class selector.
$('.trigger').click(/* ... */);
jsFiddle
ID attributes must be unique on the page. Change all the id="trigger" to class="trigger" then try:
$(".trigger").click(function (){
$(this).find('.menu-item').toggle();
});
JSFIDDLE
$(".trigger").click('.menu-item', function () {
$(".menu-item", this).toggle();
});
Multiple elements with the same id is invalid HTML, and jQuery will only target the first that it finds with that id.
I updated your fiddle to use a class instead of ids
<div id="trigger" class="trigger">
Then:
$(".trigger").click(function (){
$(".menu-item", this).toggle();
});
to target the class and not the id.
Why do the elements have the same ids? An ID should be unique. If you want to select all the <li>s, use a CSS selector like $(".toggle-li").
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.
I'm a little confused about which jQuery method and/or selectors to use when trying to select an element, and then remove certain descendant elements from the wrapped set.
For example, given the following HTML:
<div id="article">
<div id="inset">
<ul>
<li>This is bullet point #1.</li>
<li>This is bullet point #2.</li>
<li>This is bullet point #3.</li>
</ul>
</div>
<p>This is the first paragraph of the article</p>
<p>This is the second paragraph of the article</p>
<p>This is the third paragraph of the article</p>
</div>
I want to select the article:
var $article = $('#article');
but then remove <div id="inset"></div> and its descendants from the wrapped set. I tried the following:
var $article = $('#article').not('#inset');
but that didn't work, and in retrospect, I think I can see why. I also tried using remove() unsuccessfully.
What would be the correct way to do this?
Ultimately, I need to set this up in such a way that I can define a configuration array, such as:
var selectors = [
{
select: '#article',
exclude: ['#inset']
}
];
where select defines a single element that contains text content, and exclude is an optional array that defines one or more selectors to disregard text content from.
Given the final wrapped set with the excluded elements removed, I would like to be able to call jQuery's text() method to end up with the following text:
This is the first paragraph of the article.This is the second paragraph of the article.This is the third paragraph of the article.
The configuration array doesn't need to work exactly like that, but it should provide roughly equivalent configuration potential.
Thanks for any help you can provide!
I suppose you do not want to modify the original HTML by removing elements from it, but you want to just get the content of article without the inset.
Thats why I would use clone() to get a copy of the article and then remove the inset from it.
Like this:
$("#article").clone().find("#inset").remove().end().text()
$("#article") selects the article div, clone creates a
copy,
find gets the children to
remove (you could also use children),
remove(), removes the selected inset,
end() goes back to the original selection.
At the end I just added text() as you mentioned you wanted to do that.
if you want to remove anything in #article but #inset use:
$('#article > *:not(#inset)').remove() // selects all direct children of #article but not #inset and removes them
see an example here: http://jsfiddle.net/zwPsD/
if want to apply this rule to more then one DOM element you can chain them:
$('#article, #article2, #article3, #etc').find('> *').not('#inset, #that, #and. #there').remove()
you can find an example of this here:
http://jsfiddle.net/ZNjdE/
and with a simple each you can extract the text:
http://jsfiddle.net/ZNjdE/2/
Unless I am missing something, why can't you select all of the <p> elements within the article div?
$("#article p")
If that is unacceptable, I think you are looking for the filter function...
$("#article").filter(":not(#inset)")
Note: you can have multiple selectors within the :not() selector. They just have to be comma delimited, so this approach should accomodate your configurational needs.
Try something like this.
$('#article').children(':not(#inset)').each(function(){
alert($(this).text());
});
If you want to do it with an object:
var selectors = {
select: '#article',
exclude: ['#inset', 'p']
};
$(selectors.select).children(':not('+selectors.exclude.join(',')+')').each(function(){
alert($(this).text());
});
EDIT
To get any level of ancestor, you could add extra selectors and use find(). Eg.
$('#article').find('li:first, :not(#inset, #inset *)').each(function(){
alert($(this).text());
});
With this you'd be excluding #inset and all #inset's ancestors except the first li. It won't quite work with the selectors object from before though because you're excluding a group of elements and then including some of the excluded ones. You could do it with three elements in the object:
var selectors = {select: ... , exclude: ... , includeFromExcluded: ...};