I have a situation with two divs, one parent div which has proper classes and another div inside the parent div which doesn't have any class but on a jquery event from the parent div I want to assign a class to the inner div.
This is how the structure looks:
<div class="noUi-handle noUi-handle-lower">
<div class="">
<span></span>
</div>
</div>
Any advice how to get to the inner div and assign a class by calling the parent div with jquery?
Yes, you can use attr-elem selector like
$('.noUi-handle.noUi-handle-lower > div[class=""]').addClass('whatever');
Demo
If you don't want to add class with jQuery and simply want to target those elements than only CSS would suffice as well..
.noUi-handle.noUi-handle-lower > div[class=""] {
/* Targets those div elements which has empty class attribute */
}
Explanation : The selector selects all the div elements with empty class attribute which are direct child to element having both the classes i.e .noUi-handle and .noUi-handle-lower
Try .find. In conjunction with $(this) it will only look for child elements on that event.
function pizzaToppings() {
$(this).find('div').addClass('mushrooms');
}
$('.noUi-handle').on('click', pizzaToppings);
FIDDLE
Related
i want to add a class name 'disabled' under a parent div call 'anchorxx'
The disabled class div can be anywhere in the anchorXX divs
is it possible to do it with jquery ? i have no idea how i can manage to do it.
Thanks for your helps
a simple approach is
$(".anchor"+ id + " > div").addClass("disabled")
class will be added to the immediate div child element of .anchor1 div
Use jquery prefix selector and find the relevant element. Use addClass to add the required class
$('div[id^=anchor]').find('.whereYouwantToadd').addClass('someClass')
you can use jQuery's wildcard selector for this purpose.
link
you can find the anchor id and change the class of underlying div like this:
$('div[id*="anchor"]').child('div.fiche-left-disabled').addClass('disabled');
Add the 'disabled' class to its first children:
$('#anchor1').children().first().addClass('disabled')
For all anchors
$('div[id^="anchor"]').children().first().addClass('disabled')
Below is the structure of my html
<div class="parent">
//many other elements
<div class="child">
<div class="grandchild"></div>
</div>
</div>
I want to select all elements inside parent except elements inside child
I tried the below one which didnt work
$(".parent *:not(.child *)")
How can I select that?
Try this:
$('.parent *').filter(function(){
return $(this).parents('.child').length === 0;
});
This will select all elements inside .parent except those who are also children / sub-children of .child
$('.parent *:not(.child, .child *)')
Try this.
Although maybe you want this:
$(".parent > *:not(.child)")
Try this:
will select all the div that start with the class child under the parent class .parent.
$('.parent div[class^="child"]')
$('.parent *').not('.child *')
I want to select all elements inside parent except elements inside
child
you can use find method.
It will find all the descendants/children except children inside class child
$(".parent").find("*").not($(".child").children()).each(function(){
alert($(this).prop("class"));
});
OK, I know how to add class as well as detect the class of the div in jQuery but now I want to get the class name of the child inside the parent div and then add a class or id to the parent div that hold the child div.
example:
<div>
<div class="childdiv">this is the child divident</div>
</div>
after the div child class has been get or detected then add class or id to the parent div (in my case, I use class)..
the output should be:
<div class='parentclasshasbeenadded'>
<div class="childdiv">this is the childdiv</div>
</div>
This just an experiment, once this succeed then I'm going to apply this to my actual big bang project, please help me, thanks in advance.
PS: I'm open to any suggestions, recommendations and ideas.
You could also do
$('div :has(".childdiv")').addClass('parentclasshasbeenadded');
$('.childdiv').parent().addClass('parentclasshasbeenadded');
Above will add class=parentclasshasbeenadded to parent of .childdiv
and to add id:
$('.childdiv').parent().attr('id', 'someid');
To detect class exists you need to use hasClass()
$('div').children().each(function() {
if($(this).hasClass('childdiv')) {
// to add class
$(this).parent().addClass('parentclasshasbeenadded');
// to add id
$(this).parent().attr('id', 'someid');
}
});
if($(this).children().hasClass("childdiv")) {
$(this).addClass("Thaparentclasshasbeenadded")
}
this might help to figure things out.
$('.parent .child')[0]{
//there is
}
I have the following div tag, which will be created onload by jquery. I want to remove only the span tag and its contents which is being created inside the div. How can i do this using jquery ? I have tried innerHTML but it deletes all the contents of the div with id uniform-qualification, as I want to delete only the span tag below.
<div id="uniform-qualification" class="">
<span>BCh</span>
</div>
Note : the span tag cannot be given with an id as its being created dynamically from the UI plugin
$("#uniform-qualification > span").remove();
but you'll need to provide more information if you want a more informed answer. For example, if you have more than one span but only want to remove the first one you'll need something like:
$("#uniform-qualification > span:eq(0)").remove();
To remove all span elements within the div try the following:
$('#uniform-qualification span').remove();
To remove only child span elements:
$('#uniform-qualification > span').remove();
To remove only the first child span element:
$('#uniform-qualification > span').first().remove();
$('#uniform-qualification').html('');
That'll do the trick.
I am trying to use the following jQuery code to add a div with class col_box inside the col_left div:
$('#col_left').add('div').addClass('col_box');
My DOM tree looks like this:
<div id="header">Header</div>
<div class="col_container">
<div id="col_left">
<div class="col_box">A</div>
<div class="col_box">B</div>
</div>
</div>
However the jQuery code isn't working. It adds the class col_box to every element on the page.
$('#col_left').add('div') is adding all <div> elements to the original selection. Try using $('#col_left').append('<div class="col_box"></div>') instead (or .prepend).
$('#col_left').add('div') means the same as $('#col_left, div'). i.e. "The element with the id 'col_left' and all div elements.
If you want to select the divs that are children of col_left, just use a child combinator.
$('#col_left > div').addClass('col_box')
.add() adds a selector to the selection, it doesn't create or add elements.
$('#col_left') means *select element id col_left*
.add('div') means add all divs of the page the the selection
So at this point you've selected #col_left and all the divs.
.addClass('col_box') means *add the class col_box to all elements of the selection*.
Here is how to create a div and add it to #col_left:
$('<div></div>').addClass('col_box').appendTo('#col_left');
Or:
$('<div class="col_box"></div>').appendTo('#col_left');
you can use
.append appends after the matched target
$('#col_left').append(
$("<div/>",{class:'col_box'}).html("div added")
);
here is the fiddle http://jsfiddle.net/R65cn/4/