Develop Reference

How to select all following elements with class in jquery

How can I select all following elements from my selector, stopping when the next element is not part of it and ignoring the further elements?
example:
<div class="primary"></div>
<div class="sub"></div>
<div class="sub"></div>
<div class="sub"></div>
<div class="primary"></div>
<div class="sub"></div>
<div class="primary"></div>
<div class="sub"></div>
<div class="sub"></div>
now in js / jquery:
$('.primary').click(function()
{
$(this).... //acces to all following elements with class "sub"
});
so when clicking on the first primary div, I can affect the 3 following "sub" divs
I know I could do some kind of .next() in a while, but this seams inefficient.

Use .nextUntil()
$('.primary').click(function(){
$(this).nextUntil('.primary').text($(this).text())
});
Demo: Fiddle

This will Helpful to you
**SEE DEMO http://jsfiddle.net/dhaval17/W3Jsy/**

.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();
});
});

Show elements of a specific class Javascript(Jquery)

<div id=klik>KLIK </div>
<div class="list">
<div class="list-wrapper">
<div class="line">1</div>
<div class="line">2</div>
</div>
<div class="line">3</div>
<div class="line">4</div>
</div>
This is the Html. I use Javscript to hide the whole list first. Then I would like to make a onclick function to show just the first two elements, the two in div list wrapper. This the code i have written.
$(document).ready(function(){
$(".list").hide();
$("#klik").click(function(){
$(".list-wrapper").show();
});
});
The problem it never shows the elements.

You are trying to show an element that is still wrapped inside a hidden parent element. In case you hide and show the same selection it is working just fine. You could do it like this:
$(document).ready(function(){
$(".list").hide();
$("#klik").click(function(){
$(".list").show().children().not('.list-wrapper').hide(); //show .list, then hide everything that is not inside .list-wrapper
});
});​
Working demo
EDIT:
And fix your HTML markup (missing quotes "" ) <div id=klik>KLIK</div>

You are hiding the parent element of what you are trying to show. show will only display the elements you called it on, it won't cascade up the DOM tree.
$(document).ready(function(){
$(".list").hide();
$("#klik").click(function(){
$(".list").show(); //Show .list elements instead
});
});

jquery closest() tree traversal

I'm having trouble getting my jQuery to work correctly. I have this HTML structure:
<div class="hide"><!-- form --></div>
<div class="button-hide">Hide Form</div>
<div class="button-show">Show Form</div>
When the 'button-show' anchor is clicked, it should hide it's own div, show the above 'button-hide' div and toggle the above 'hide' div:
$(document).ready(function(){
$(".hide").hide();
$(".button-hide").hide();
$("div.button-show a").click(function(){
$(this).closest("div.hide").slideToggle();
$(this).closest("div.button-hide").show();
$(this).hide();
});
});
None of this works for me, am I mis-using the 'closest()' command here?

Just a bit different from the others...
$(".button-show a").click(function(){
$(this).parent().siblings(".button-hide").show();
...
});

You are matching closest on the link not the parent div. Should be .parent().closest()

Yup, closest traverses the ancestors like parents() does. The div above it is NOT an ancestor but a sibling(look at alex's answer). if you had a container div for those divs its better to just use that as a reference like this:
<div class="parent-container">
<div class="hide"><!-- form --></div>
<div class="button-hide">Hide Form</div>
<div class="button-show">Show Form</div>
</div>
then in your jquery
$(".button-show a").click(function(){
$(this).parents(".parent-container").find(".button-hide").show();
etc
})

jquery Remove siblings elements, doesn't work in IE7

I'm trying to remove all the sibling elements after a particular div, lets say the div tag with id = id8.
<form>
<div id="id5">something ...<div>
<div id="id8">something ...<div>
<div id="id3">something ...<div>
<div id="id97">something ...<div>
<div id="id7">something ...<div>
...
<div id="idn">some text ...<div>
</form>
To do that I use the following code in jquery.
$("#id8 ~ div").remove();
It works fine in Firefox, but It doesn't work in IE7.
Is there an alternative way to archieve this, using jquery and just giving the tag id from the element I want to start removing the elements?
Thanks
Thanks everybody for your help
I end up with this solution based on the accepted answer
function removeAfter(el,tag){
element = $('#'+el);
var aElements = $(tag,element.parent());
var index = (aElements.index(element));
for(i=(index+1);i<aElements.length;i++) {
$('#'+$(aElements.get(i)).attr('id')).remove();
}
}
just call
removeAfter('id8', 'div')

Two things!
1) Close your <div> tags! It should look like this:
<form>
<div id="id5">something ...</div>
<div id="id8">something ...</div>
<div id="id3">something ...</div>
<div id="id97">something ...</div>
<div id="id7">something ...</div>
<div id="idn">some text ...</div>
</form>
2) The ~ operator only matches siblings that follow the matched element (ie it will match id3, id97, id7 and idn, but not id5). To match every sibling, including id5, you do this:
$("#id8").siblings("div").remove();
That should leave you with just id8. I tested this in Firefox 3.5.5 and IE7.0something. Hope that helps!

Three steps here:
Find the index number of the element we've clicked, with respect to its parent.
Loop through all the div elements contained within this parent, starting after the one we just found
Delete each div found
$(document).ready(function(){
$('#parent').children().click(function(){
var index = ($('div',$(this).parent()).index(this));
for(i=(index+1);i<$('div',$(this).parent()).length;i++){
$($('div',$(this).parent()).get(i)).hide();
}
});
});
This will work on this HTML
<div id="parent">
<div id="c1">c1</div>
<div id="c2">c2</div>
<div id="c3">c3</div>
<div id="c4">c4</div>
<div id="c5">c5</div>
</div>
Comment here if you've got any more problems on the matter!
P.S. An application of this solution exact to your request is the following
function removeAfter(el){
element = $('#'+el);
var index = ($('*',element.parent()).index(element));
for(i=(index+1);i<$('*', element .parent()).length;i++){
$($('*', element.parent()).get(i)).hide();
}
};

EDIT:
Editing the answer below to add what should be a fix for the problem:
$("#id8").nextAll().remove();
END EDIT.
Ok. This appears to be an interesting bug - initial testing seems to indicate it's a jquery bug although I haven't found any specific mention of it anywhere.
The bug seems to be that if your initial selector tag is the same type as its siblings then it will fail to return any siblings in IE7.
I tested it using the jQuery example code for the selector itself and was able to duplicate your problem in IE8 emulating IE7.
If you check the jquery example code I'll stick below you can see that the actual element they're using as the initial selector is a span and the sibling elements are all divs whcih seems to me to indicate they know about this bug and haven't documented it, which is both cunning and shitty.
<script>
$(document).ready(function(){
$("#prev ~ div").css("border", "3px groove blue");
});
</script>
<div>div (doesn't match since before #prev)</div>
<span id="prev">span#prev</span>
<div>div sibling</div>
<div>div sibling <div id="small">div niece</div></div>
<span>span sibling (not div)</span>
<div>div sibling</div>
Change the #prev span to a div and you'll get the same failure as you're getting currently. I'd submit a bug with the jquery team.