Develop Reference

jQuery code is hiding all content inside my div

I have the following code:
jQuery(document).ready(function($) {
$("ul.accordion-section-content li[id*='layers-builder'] button.add-new-widget").click(function() {
$("#available-widgets-list div:not([id*='layers-widget'])").css('display','none');
});
});
The idea is, when i click a button that contains the class "layers-builder", all divs in "available-widgets-list" that DO NOT contain the class "layers-widget" are hidden.
The problem I'm facing is that using this code also hides all the divs inside "layers-widget" (as not all of them have "layers-widget" in the id.
for example, here is a mockup markup:
<div id="some-id">
...
</div>
<div id="this-layers-widget-89">
<div id="hello"></div>
<div id="yes"></div>
</div>
In the above example, the first div "some-id" would be hidden, along with all the child divs inside "this-layers-widget-89"
How can I make it so that all the content within the div containing "layers-widget" still shows?

The ">" operator specifies that the div must be a direct child of #available-widgets-list:
$("#available-widgets-list > div:not([id*='layers-widget'])").css('display','none');

You should add a class instead of relying on finding parts of some-id but this will work also work: $('[id*="some-id"]');
You should also be using jquery's built in hide()method instead of css('display', 'none'). They do literally the exact same thing but using the built in methods is more readable.

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

Javascript click function not reacting in proper parent

I have this javascript that animates a div into a parent div.
Javascript
$(document).ready(function() {
$("a").click(function() {
var $righty = $(this).next();
$righty.animate({
right: parseInt($righty.css('right'),10) == 0 ?
-$righty.outerWidth() :
0
});
});
});
HTML
<div id="home" class="page">
<div id="page1">
Inside Div
</div>
Outside Div
<div id="page2" class="page">
content
</div>
</div>
I want the <a> tag to live in the page1 div. As of now, the Javascript only works when the <a> tag lives in <div id="page1">. I apologize if this is very basic, as I am new to Javascript. Thank you!

Use a selector for your a tag, instead of just a. Like a class or an id. You don't want this to happen to every single a tag, right?
Also, righty is getting NEXT...well, there's nothing next to the a tag you want to hit.
You want to do $(this).parent().next(); - no, see edit below. I am guessing, because you never told us what you wanted, exactly.
EDIT: This may not help at all. Just know that you can't have an a tag in a div, and call .next() - it has no siblings. .next() hits the next sibling. Not as it appears visually on the page, but as it exists in the DOM tree....you need to have a sibling in the div for the a tag to grab with .next().....you don't. Does that make sense? What exactly are you trying to animate?
EDIT EDIT: Tell me the id or class of the tag you want animated when a given a tag with a given class or id is clicked, and I'll show you how to do it.
EDIT EDIT EDIT: If you just want to make page2 animate when page1 > a is clicked, do this:
$('#page1 a').click(function(){ $('#page2').animate(...put animation stuff here...) });

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.

Jquery find all except

I have following HTML:
<div id="123" class="test">
<div class="testMessage">Foo</div>
<div><div class="testDate">2010</div></div>
<div id="127" class="test">
<div class="testMessage">Bar</div>
<div><div class="testDate">2011</div></div>
</div>
</div>
And I have following JS/jQuery code:
$(".test").find(".testDate").val("cool 2010");
How to change JS/jQuery to find "testDate" class element except in children "test" class block without using children?
P.S. I know only about class name and I don't know how many divs can be nested.

Update
Its probably the weirdest selector I've ever written:
$("div.test").not(':has(> .test)').siblings().find('.testDate').text('cool 2010');
Demo: http://jsfiddle.net/mrchief/6cbdu/3/
Explanation:
$("div.test") // finds both the test divs
.not(':has(> .test)') // finds the inner test div
.siblings() // get all other divs except the inner test div

Try this and also div elements do not have a value property, use html() method to set the inner html or text()
$("div.test :not(.test)").find(".testDate").html("cool 2010");
If you can modify your main div id to "_123", you can straight away use the id selector like this
$("#_123 > div.testDate").html("cool 2010");

I think the not() selector might help. You can learn more about it here: http://jsperf.com/jquery-css3-not-vs-not

Anytime you try to select $('.test'), it will grab all elements with a class='test'. You need to start at the outermost body tag:
$('body').children('.test').children(':not(.test)').find('.testDate').text('cool 2010');