remove children of particular parent from selection - javascript

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"));
});

Related

Get the last child of parent div

How can I get the last child of parent div, every time I press enter a new div created, I want to get the last div of specific parent div.
<div id="parentdiv">
<div id="child1"></div>
<div id="child2"></div>
<div id="child3"></div>
</div>
$("#parentdiv :last-child");
You should use last child selector https://api.jquery.com/last-child-selector/
You can use jQuery last() method like following.
$('#parentdiv > div').last()
UPDATE: last div of parent div having a class myclass.
$('#parentdiv > div.myclass').last()
My suggestion is not to use jQuery here, as querySelector in javascript is sufficient to do your job.
var parentDiv = document.getElementById('parentdiv');
console.log(parentDiv.querySelector(':last-child'))

find div within parent div by parent div class in jquery

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

how to hide parent div from 2 child divs?

I have a parent div and 2 nested child divs. I want to hide the first child div and the parent div when the second child div doesn't contain any content.I was wondering how this could be done?
I want to hide #portfolio when .portfolio-works-container div is empty.
<div id="portfolio"><!--portfolio-->
<div id="portfolio-works"><!--portfolio-works-->
<div class="portfolio-works-container"><!--portfolio-works-container-->
</div><!--/portfolio-works-container-->
</div><!--/portfolio-works-->
</div><!--/portfoio-->
Try this:
jQuery(document).ready(function($){
if($.trim($('.portfolio-works-container').html()).length == 0){
$('#portfolio').hide();
}
});
Please check this : jsfiddle url
Use .is() and :empty() selector. Try this:
if($(".portfolio-works-container").is(':empty')){
$("#portfolio").hide();
}
You can use:
if($('.portfolio-works-container').contents().length == 0) {
$('#portfolio').hide()
}
IN order to hide parent div you need to find the parent element using parent() function of jquery.
In below code you will check if div is empty then find parent divs and hide them
if( !$.trim($('.portfolio-works-container').html()) ) {
$(this).parent().hide();
$(this).parent().parent().hide();
}
Since you are already using jQuery (as the question is tagged):
if ($('.portfolio-works-container').html()=='')
$('#portfolio').hide();

Find element above another using jQuery

I'm trying to find the element using jQuery from the following html.
<ul class="gdl-toggle-box">
<li class="">
<h2 class="toggle-box-title"><span class="toggle-box-icon"></span>Volunteer Form</h2>
<div class="toggle-box-content" style="">
</div>
</li>
</ul>
What I'm looking to do is when the h2 is clicked find the li above the h2 add a class active to it. Tried a few different calls but no luck.
EDIT
The biggest issue is that there are multiple toggle boxes on a page so something like this works on pages with a single toggle but pages with multiple the result is they all open together.
var gdl_toggle_box = jQuery('ul.gdl-toggle-box');
gdl_toggle_box.find('li').each(function(){
jQuery(this).addClass('item');
});
gdl_toggle_box.find('li').not('.active').each(function(){
jQuery(this).children('.toggle-box-content').css('display', 'none');
});
gdl_toggle_box.find('h2').click(function(){
if( jQuery('.item').hasClass('active') ){
jQuery('.item').removeClass('active').children('.toggle-box-content').slideUp();
}else{
jQuery('.item').addClass('active').children('.toggle-box-content').slideDown();
}
});
You can use closest.
closest will match the first parent element that matches the selector traversing up the DOM tree.
Demo
$('h2.toggle-box-title').click(function(){
$(this).closest('li').addClass('active');
});
Try this.
$('h2.toggle-box-title').click(function(){
$(this).parent().addClass('newclass');
});
try this:
$('h2.toggle-box-title').click(function() {
$(this).parent('li').addClass('active');
});
On you click in the button you can use the event:
$("something").parent().find("h2.myClass");
// And if you want you can add class after you find you object
http://api.jquery.com/find/
Selecting an element's parent
In order to select an element parent, you can use the parent() function.
Try this:
$('h2.toggle-box-title').click(function() {
$(this).parent('li').addClass('active');
});
*to be more specific, you target the parent you would like to choose by specifying its selector
Check the jQuery API Documentation here
parent() - Get the parent of each element in the current set of matched elements,
optionally filtered by a selector.

How to select an element by ID using jQuery

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/

Categories

Resources