Develop Reference

js append div to only current parents child

I have a div block that is repeated on the page for each product. I am using JS to cycle through all the instances of a div class and would like to move that div to another div in the same block. I wrote this:
$(value).appendTo('.product-image')
and it adds each div to all the product-image divs on the page. How can I add each div only to the product-image div that is a child of $(values) parent?
This did not work for me:
$(value).appendTo($(value).parent().find('.product-image'))

Try this to select the first parent div.
$(value).appendTo($(value).parent('div:first()').find('.product-image'))

I think this will give you some ideas for implementation:
For example if you value element has value class:
$('.value:has(.product-image)').find('.product-image').each(function(){
$(this).append(your_new_div)
});

i came up with this sulotion thanks !
ind++
var tryy = "try"+ind;
$(value).parent().find('.product-image').addClass(tryy);
var tryyy = '.'+tryy;
$(value).appendTo(tryyy);

remove children of particular parent from selection

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

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

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 show all child nodes in jQuery

show all children
hide child 1
hide child 2
<div id="p" style="display:none;">
<div id="c1">child 1</div>
<div id="c2">child 1</div>...
</div>​
$("#lnkP").click(function(){
$("#p").children().show(); //seems there's a problem here...
});
$("#lnkC1").click(function(){
$("#c1").hide();
});
$("#lnkC2").click(function(){
$("#c2").hide();
});​
jsFiddle: http://jsfiddle.net/CBGsF/1/
What I am trying to do is:
p is a parent container
click show all children link, display
all child divs under p
click lnkC1 or lnkC2 to hide
individual child div
But it seems that I didn't get .children() working correctly. So how to fix it? Any ideas?

Since the parent (#p in your case) has a display:none, it's children won't be visible.
You'll need to show the parent first,
$("#p")
.show()
.children().show();
(jQuery's chaining, very helpful)
Please try and get rid of the inline styling (it gets unmanageable after a while), use classes as much as possible.
You can have a class in css,
.displayNone
{
display: none;
}
.displayBlock
{
display: block;
}
And then use jquery methods .removeClass(), .addClass() or .toggleClass() to show/hide your elements.
This is just a recommendation :)
Test link: http://jsfiddle.net/CBGsF/8/

You need to show the #p also
Updated fiddle: http://jsfiddle.net/CBGsF/7/
$("#lnkP").click(function(){
$("#p").show().children().show(); //Add show() before children.show call
});
$("#lnkC1").click(function(){
$("#c1").hide();
});
$("#lnkC2").click(function(){
$("#c2").hide();
});​

Updated fiddle : http://jsfiddle.net/CBGsF/5/
$("#lnkP").click(function(){
$("#p").show();
$("#p").children().show();
});
$("#lnkC1").click(function(){
$("#c1").hide();
});
$("#lnkC2").click(function(){
$("#c2").hide();
});​

Parent element is set to "display":"None" That is the problem
$("#p").css("display","block"); //is required in show all anchor click
Check the fiddle
http://jsfiddle.net/CBGsF/6/
Thanks

(Posted solution on behalf of the question author).
I thought .children() would search for invisible nodes as well. Well, I was wrong on that.