Develop Reference

jQuery plugin for repeating divs

How do I access, div with class name fire in this for a function or in general access nested div class?
//this doesn't seems to work
function lightCandle(){
$(".fire").show();
}
<div class="dom" id="dom" style="display: none">
<div class="happydiwali" id="happydiwali">
<div class="candle"></div>
<div id="match" class="match"> </div>
<div class="fire" id="fire"></div>
<div class="light"></div>
</div>
</div>

You're showing the .fire element but it's parent .dom element remains hidden because of the display:none.
Show the .dom element as well as .fire:
$(".fire").show().closest('.dom').show();

Make the parent to display: block, and to the child as well.
function lightCandle(){
var dom = $(".dom");
if(dom.css('display') == none){
dom.css('display', 'block');
dom.find('.fire').show();
}
//Or with out condition,
dom.css('display', 'block');
dom.find('.fire').show();
}

How to hide content between two specific id by jQuery?

I have to hide everything between two certain divs with different ids.
For example:
<div id="a1">Hi</div>
<div>Some Random Text</div>
<div id="a2">Hello</div>
Like in above example, I want to hide the div between id a1 and a2.

Use nextAll with each.
$('#a1').hide().nextAll().each(function() {
$(this).hide();
if ($(this).attr('id') === 'a2') {
return false;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>HELLO</div>
<div id="a1">Hi</div>
<div>Some Random Text</div>
<div id="a2">Hello</div>
<div>BYE</div>

You can achieve this using nextUntil(). In one line:
$("#a1").nextUntil("#a2").hide();
Example:
$(document).ready(function() {
$("#hide").click(function() {
var hideElement = $("#a1").nextUntil("#a2");
hideElement.hide();
});
});
<div id="a1">Hi</div>
<div>Some Random Text</div>
<div>Some Random Text</div>
<div id="a2">Hello</div>
<button id="hide">hide</button>
jsFiddle
Note that nextUntil() doesn't include stray text nodes, see this question for a solution to that.

HI now you can hide this in css
#a1, #a1 ~ #a2{display:none;}
<div id="a1">Hi</div>
<div>Some Random Text</div>
<div id="a2">Hello</div>

If the cotrols are all siblings, you can use the .nextUntil() or .prevUntil() jQuery selector. See this or this for details.
If however the controls don't share the same parent, there's no simple selector. You'll have to create a method to find the parents of the controls and propably their parents etc.

Its better if you hide by using the css only.
#a1,#a2 {
display:none;
}
<div id="a1">Hi</div>
<div>Some Random Text</div>
<div id="a2">Hello</div>

use simple jquery,
$("#a1+div").hide();
or using css
#a1+div{
display: none;
}
if you want to delete everything between those two divs try this,
$("#a1").nextAll().each(function(){
if($(this).attr("id") != "a2"){
$(this).hide();
}
else{
//element found with id 'a2' so exit;
return false;
}
});

ITs simply use the element id and hide() function
$(document).ready(function(){
$("#a1,#a2").hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="a1">Hi</div>
<div>Some Random Text</div>
<div id="a2">Hello</div>
.

jQuery show one next sibling at a time on click

I'm trying to show hidden rows one at a time on button click, but they all show at once since they have class "row" - the 1st row is shown by default and the rest are hidden
I can't use Id selectors since it's server side and dynamic, so how can I only show the immediate next row/sibling on each click until there are none left? I could append a counter to each row class but that wouldn't help when trying to select the next row in jQuery with that counter
This is what I have which shows all rows on one click
<script>
$(".myButton").click(function() {
$('.container .row').next('.row:hidden').slideDown();
});
</script>
<div class="container">
<!-- 1st row not hidden by default -->
<div class="row">
<div class="row">
<div class="row">
</div>
Thanks for help in advance!

$('.container .row:visible').last().next('.row:hidden').slideDown();
If all you're doing is showing them in a sequential order, then you don't need to track which are active. You can simply use the visibility to always choose the last.
All you do is add the :visible to the row selection, to find all visible rows; then use the last() method to only reference the last of that stack. This allows next() to be called for only one element (the last one), and not all the rows in the container.
To simplify this even more (and call fewer methods), you could choose to only select the first hidden row: $('.container .row:hidden:first').slideDown(); or $('.container .row:hidden').first().slideDown();
Fiddle

If you add the class "selected" to the first row than you could do this:
<script>
$(".myButton").click(function() {
$('.container .row.selected')
.removeClass('selected')
.hide()
.next()
.addClass('selected')
.slideDown();
);
</script>
<div class="container">
<div class="row selected">
<div class="row">
<div class="row">
</div>

You could try iterating through the collection to display the correct one. See this JSFiddle: http://jsfiddle.net/gjqb6m83/
var i = 0;
var collection = $(".row");
$(".myButton").click(function() {
$(collection).css('display', 'none');
$(collection[i]).slideDown();
i++
i = i % collection.length;
});

you can use :nth-child()
$(document).ready(function() {
var counter = 1;
$(".myButton").click(function() {
counter++;
$('.container .row').hide();
$('.container .row:nth-child(' + counter + ')').slideDown();
});
});
.row {
display:none;
}
.row:nth-child(1) {
display:block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="myButton">My Button</button>
<div class="container">
<div class="row">row 1</div>
<div class="row">row 2</div>
<div class="row">row 3</div>
<div class="row">row 4</div>
<div class="row">row 5</div>
</div>

Make use of another jQuery-pseudo-selector :first
$(".myButton").click(function() {
$('.container .row:hidden:first').slideDown()
});
and dont forget to close your divs! Look at https://jsfiddle.net/kswmktce/1/

Yet another solution. This one shows just one at a time, and starts over when finished.
$(".myButton").click(function() {
$(".row:visible").next().slideDown();
$(".row:visible").first().hide();
if (!$(".row:visible").length)
$(".row").first().slideDown();
});
.row {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<button class="myButton">Click ME</button>
<div class="container">
<div class="row">a</div>
<div class="row">b</div>
<div class="row">c</div>
<div class="row">d</div>
<div class="row">e</div>
</div>

accessing an element of a class in jquery not working

I want to access different id's (with same name) using $this in jquery, but its not working.
I want when a superhero is clicked only his friend and he himself change their class only.
<!DOCTYPE html>
<html>
<head>
<title>Try jQuery 2.0.0 Online</title>
<script src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
<script>
$(document).ready(function() {
$('.shikhar').click(function(){
$(this).find('#a').click(function(){
$(this).find('#b').addClass("selected");
$(this).find('#a').addClass("highlight");
});
$(this).find('#b').click(function(){
$(this).find('#a').addClass("selected");
$(this).find('#b').addClass("highlight");
});
});
});
</script>
<style>
.selected {
color:red;
}
.highlight {
background:yellow;
}
</style>
</head>
<body>
<div class="shikhar">
<div id="a">Spiderman</div>
<div id="b">Hulk</div>
</div>
<div class="shikhar">
<div id="a">Superman</div>
<div id="b">Batman</div>
</div>
</body>
</html>

ID attributes must be unique. JavaScript stops searching as soon as it finds the first element with a matching ID. Simply change those IDs into classes instead:
<div class="a">Spiderman</div>
...
<div class="a">Superman</div>
Then change your jQuery selectors to $('.a') and $('.b') instead:
$(this).find('.a').click(function(){
$(this).find('.b').addClass("selected");
$(this).find('.a').addClass("highlight");
});

You have duplicate ids. IDs should be unique. You can use the markup:
<div class="shikhar">
<div class="a">Spiderman</div>
<div class="b">Hulk</div>
</div>
<div class="shikhar">
<div class="a">Superman</div>
<div class="b">Batman</div>
</div>
And JS:
$('.shikhar').click(function(){
$(this).find('.a').click(function(){
$(this).next().addClass("selected");
$(this).addClass("highlight");
});
$(this).find('.b').click(function(){
$(this).prev().addClass("selected");
$(this).addClass("highlight");
});
});

you cant use the same ID for different elements. use ID for only one element.
HTML:
<div class="shikhar">
<div class="a">Spiderman</div>
<div class="b">Hulk</div>
</div>
<div class="shikhar">
<div class="a">Superman</div>
<div class="b">Batman</div>
</div>
jQuery:
$('.shikhar').each(function(){
$(this).on('click','.a, .b',function(){
$(this).closest('.shikhar').children().removeClass('selected highlight');
$(this).addClass('selected');
$(this).siblings().addClass('highlight');
});
});
Fiddle:
http://jsfiddle.net/me2DE/

Try this:
$(document).ready(function() {
$('.shikhar >').click(function(){
$(this).addClass("highlight");
$(this).siblings('div').addClass("selected");
});
});

Here is your answer: http://jsfiddle.net/S5rbz/ But it's wrong to have more items with the same id value on the same page. So replace the id's with class values.Later edit: also, I think you want to remove the existing class, for each children, and add the new class, as if you keep adding the classes, they will be overwritten by the last named class(also keep in mind the cascading rule declarations).

Selecting a parent element (without using Jquery)

I just need to access the parent div where I have a button changing his siblings divs.
A code example can explain better:
<div class="parent"> <!-- This is structure repeats N times -->
<div class="divToToggleVisiblity divA">trololo A</div>
<div class="divToToggleVisiblity divB">trololo B</div>
<button onClick="toggleThem(this)">This button will toggle above divs</button>
</div>
function toggleThem(a){ // something like this, BUT without Jquery
$(a).closest(".parent").find(".divA").hide();
}

That's what parentNode is for:
a.parentNode.querySelectorAll('.divA');

function toggleThem(elem) {
elem.parentNode.getElementsByClassName('divA')[0].style.display = 'none';
}