Develop Reference

Setting 'value' of hidden input in jQuery [duplicate]

I have a really simple problem.
How can I find the first previous element of another element? I tried the code below without success.
HTML:
<div class = "A">HERE</div>
<div class="B">
<div class="C" style="width:50px;height:50px;background-color:#000000;"></div>
</div>
JS:
$('.C').click(function() {
alert($(this).closest('.A').html());
});
Fiddle: http://jsfiddle.net/Mcujp/4/

If you are trying to get the preceding sibling, use .prev().
If you are trying to get the sibling of the parent (like in your example) use .parent().prev().

Try this:
$('.C').click(function() {
alert($(this).parent().prev('.A').html());
});

$('.C').click(function() {
alert($(this).closest('.B').prev('.A').html());
});

if you want to target closest children of top parent you can do so as something define below.
lets assume you have an HTML like
<div class="top-parent">
<div class="parent">
<button class="add-button">Child of 1st Parent DIV</button>
</div>
<div class="parent">
<button class="add-button">Child of 2nd Parent DIV</button>
</div>
</div>
<script>
$(document).on('click','.add-button',function(){
$(this).parents('.parent').prev().closest('.parent').find('.add-button').text('im clicked by one of the button next to my parent')
$(this).parents('.parent').remove();
})
</script>
similarly if you want to target grandparent next parent containers children just change .prev() to .next()
hope i made it simple to define :)

jQuery hide parents

I have the following HTML:
<div class="windowtemplate movingwindow" style="display: block;">
<div class="top">Attenzione <span class="closebutton"></span></div>
<div class="body">
<p>texthere</p>
<span class="genericbutton">Close</span>
</div>
<div class="bottom"></div>
</div>
I'm trying to hide this box (starting from div class="windowtemplate movingwindow") with jQuery with this code:
function closedialog() {
$(this).parent("windowtemplate").hide();
};
But this doesn't sort any effect, where i'm wrong?
(I'm a newbie with jQuery, so, sorry if it's a really simple problem, but I can't find any solution!)

try this
<span class="genericbutton">Close</span>
and this for your js
function closedialog(element) {
$(element).closest(".windowtemplate").hide();
};

this here doesn't refer to the clicked element.
The selector is wrong, missing . for the class selector.
.parent() doesn't select the grandparent elements, you should use .closest() instead.
You should avoid using attribute event handlers.
$('.genericbutton').on('click', function() {
$(this).closest('.windowtemplate').hide();
});
If the .windowtemplate is generated dynamically you should delegate the event, if you are using jQuery 1.7+ you can use the .on() method:
$(document).on('click', '.genericbutton', function() {
$(this).closest('.windowtemplate').hide();
});

First of all you missed the dot signifying a class and second parent() selector searches only level up in the tree, you need parents().
Use this code -
$('.genericbutton').on('click', function() {
$(this).parents(".windowtemplate").hide();
}

.remove() not working in IE and Firefox

I'm loading div element through jQuery .load() method like this:
$(document).ready(function() {
$(".module-wrapper").load("index.php?option=com_k2&view=itemlist&Itemid=974 .genericItemList");
});
Through that I get list of items, let's say 5 of them.
<div class="module-wrapper">
<div class="genericItemList">
<div class="genericItemView">Item 1</div>
<div class="genericItemView">Item 2</div>
<div class="genericItemView">Item 3</div>
<div class="genericItemView">Item 4</div>
<div class="genericItemView">Item 5</div>
</div>
</div>
Now I want to use jQuery .remove() because I want to show just first 3 items.
HTML above is just example, in reality each item has a lot of HTML code so I want to use jQuery .remove() instead of CSS display:none.
I do that like this:
$(window).load(function() {
$(".module-wrapper .genericItemView:gt(2)").remove();
});
This is working only Chrome, but not in Firefox or IE, where I can see all 5 items.
Any suggestions?

To ensure that code only runs after the elements have been loaded, you should put it in the callback function passed to load():
$(document).ready(function() {
$(".module-wrapper").load(
"index.php?option=com_k2&view=itemlist&Itemid=974 .genericItemList",
function() {
$(".module-wrapper .genericItemList:gt(2)").remove();
}
);
});
Your class selector may also be wrong, I tried to rectify it in the code above. It looks like you want to match descendants of .module-wrapper that expose the genericItemList class, but your original selector matches the elements that expose both the module-wrapper and genericItemView classes instead.

change genericItemList to genericItemView
$(".module-wrapper .genericItemView:gt(2)").remove();

Change your class name genericItemView to genericItemList.
$(".module-wrapper .genericItemList:gt(2)").remove();
See Demo

Change it $(".module-wrapper.genericItemView:gt(2)").remove(); to $(".module-wrapper .genericItemList:gt(2)").remove();

add space before .genericItemList
$(".module-wrapper .genericItemList:gt(2)").remove();

You can use the success callback of the load() method to write dom manipulation
$(document).ready(function() {
$(".module-wrapper").load("index.php?option=com_k2&view=itemlist&Itemid=974 .genericItemList", function(){
$(".genericItemView:gt(2)", this).remove();
});
});

In jQuery how can I get the next selector in a nested loop?

I have the following structure:
<div class="foo">
<div class="moo">
<div class="too"> <input type="hidden" val="56"/></div>
</div>
</div>
<div class="foo">
<div class="moo">
<div class="too"> <input type="hidden" val="58"/></div>
</div>
</div>
Continued...
//jQuery Code
$('.too').live('click',function(){
var next_value = $(this).next('.too').find('input').val();
console.log(next_value);
});
Now I want the value of the next "too" input. How can I get this? It's not working.

Your problem is that .next() traverses sibling elements. One approach would be to climb up the DOM tree, then back down. For example:
$('.foo').on('click', '.too', function () {
var next_value = $(this).closest('.foo').next().find('input').val();
});
Also, you should try to avoid .live(). If you are using jQuery 1.7+, you'll want to use .on() (as shown in my example). If you are using anything before 1.7, try .delegate() or .bind().

First off, do not use .live. Use event delegation.
Second, .next only works with siblings. You can get the next sibling in a variety of ways -- assuming that the the .foo / .too structure is unique to the document, you can use the following:
var next_value = $(".too").eq($('.too').index(this) + 1);

$('.too').live('click',function(){
var next_value = $(this).parent('.foo').next().find('input').val();
console.log(next_value);
});
by the way,i think you should give up .live().

Selecting group of children with all the same element tag

I have a div that contains four paragraph tags. When the page is loaded, I wanted to have the first two paragraphs to be shown then have the follow paragraph elements be hidden, but I have no idea how to do this. For simplicity I set the event to a button versus a document ready event in the jsfiddle example below.
http://jsfiddle.net/zTCFe/4/
<div id="div">
<p>1 keep me shown</p>
<p>2 keep me shown</p>
<p>3 hide me</p>
<p>4 hide me</p>
</div>
<input type="button" value="press" id="button"/>
<script>
$('#button').click(function () {
$('#div').children().hide();
});
</script>

You were almost there:
$('#div').children(':gt(1)').hide();
More on the :gt selector.
http://jsfiddle.net/gromer/Tdue6/1/

Use the :gt() selector to select them

As an alternative, you can also use .slice()
$('#div').children().slice(2).hide();
http://api.jquery.com/slice/

You can use the :gt() selector:
$("#div p:gt(1)").hide();
Or, you can also use .slice() to select specific elements from the jQuery object's DOM array:
$("#div p").slice(2).hide();

You could also just use CSS for this
li:nth-child(-1n+2) {
background: yellow;
}