jQuery .next() div showing all siblings instead of just one - javascript

I'm testing a pagination type where the buttons are on a separate div from the target.
When I try to toggle the next div of the body, all of them are toggling, instead of just one.
$('#next_q').on('click', function(){
$('.question-item').hide().next('.question-item').show();
})
.question-item:not(:first-child){display: none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box-body">
<div class="question-item">Q1</div>
<div class="question-item">Q2</div>
<div class="question-item">Q3</div>
</div>
<div class="box-footer">
<button>Prev</button>
<button id="next_q">Next</button>
</div>

use :visible to select the question-item that is currently visible
$('#next_q').on('click', function(){
$('.question-item:visible').hide().next('.question-item').show();
})
also if you want it not to "skip" past the last element, use
if ($('.question-item:visible').prev('.question-item').length)
$('#next_q').on('click', function() {
if ($('.question-item:visible').next('.question-item').length)
$('.question-item:visible').hide().next('.question-item').show();
})
$('#prev_q').on('click', function() {
if ($('.question-item:visible').prev('.question-item').length)
$('.question-item:visible').hide().prev('.question-item').show();
})
.question-item:not(:first-child) {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box-body">
<div class="question-item">Q1</div>
<div class="question-item">Q2</div>
<div class="question-item">Q3</div>
</div>
<div class="box-footer">
<button id="prev_q">Prev</button>
<button id="next_q">Next</button>
</div>

You can use .data() to store an integer reflecting an index of the .question-item elements .length, use ++ and % operators to cycle the indexes passed to .eq() from current index or 0 through .question-items .length
$('#next_q')
.data({
"index": 0,
items: $(".question-item")
})
.on("click", function() {
$(this).data().items
.hide()
.eq(++$(this).data().index % $(this).data().items.length)
.show();
})
.question-item:not(:first-child) {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<div class="box-body">
<div class="question-item">Q1</div>
<div class="question-item">Q2</div>
<div class="question-item">Q3</div>
</div>
<div class="box-footer">
<button>Prev</button>
<button id="next_q">Next</button>
</div>

Check the current visible .question-item and hide it and then show the next .question-item. I also added the not last-child selector since I thought that you might want to stop at the last question.
$('#next_q').on('click', function(){
$('.question-item:visible:not(:last-child)').hide().next('.question-item').show();
});
$('#prev_q').on('click', function(){
$('.question-item:visible:not(:first-child)').hide().prev('.question-item').show();
});
.question-item:not(:first-child){display: none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box-body">
<div class="question-item">Q1</div>
<div class="question-item">Q2</div>
<div class="question-item">Q3</div>
</div>
<div class="box-footer">
<button id="prev_q">Prev</button>
<button id="next_q">Next</button>
</div>

Related

jQuery how to use toggle function to element in for loop

I'm using toggle function to 4 div's elements. I need to close prev div, when I click second. How can I do it?
$(document).ready(function() {
var $this = $(document).find('.slider-div');
var $thiz = $('.money-transf');
$('.money-transf').click(function(e) {
for (var i = 0; i < $this.length; i++) {
// here i need to add toggle function to $this[i] elements;
}
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='money-transf'>
<p>Element</p>
</div>
<div class='slider-div'>
<p>Inform about element</p>
</div <div class='money-transf'>
<p>Element2</p>
</div>
<div class='slider-div'>
<p>Inform about element2</p>
</div>
You don't need a loop for this. You simply need to call slideUp() on all other .slider-div elements before you toggle the one related to the clicked .money-transf, like this:
$(document).ready(function() {
var $slider = $('.slider-div');
var $transf = $('.money-transf');
$transf.click(function(e) {
var $target = $(this).next('.slider-div');
$slider.not($target).slideUp();
$target.slideToggle();
});
})
.slider-div {
display: none;
}
p {
margin: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="money-transf">
<p>Element</p>
</div>
<div class="slider-div">
<p>Inform about element</p>
</div>
<div class="money-transf">
<p>Element2</p>
</div>
<div class="slider-div">
<p>Inform about element2</p>
</div>
Note that I changed the $this and $thiz variable names to something more meaningful and less easy to confuse.
Try this code
$("div").click(function(){
$(this).prevAll().toggle(); // toggle all previous divs
//$(this).prevAll().addClass('hide'); // hide all previous divs
});
.hide{
display:none
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='money-transf'>
<p>Element</p>
</div>
<div class='slider-div '>
<p>Inform about element</p>
</div>
<div class='money-transf '>
<p>Element2</p>
</div>
<div class='slider-div '>
<p>Inform about element2</p>
</div>
You can try following.
Hide all the slider-div`s at the beginning
In click function, hide all the slider-div's and then show the next corresponding slider-div element
$(document).ready(function(){
var transfs = $('.money-transf');
$('.slider-div').hide();
transfs.click(function(e){
$('.slider-div').hide();
$(e.currentTarget).next('.slider-div').show();
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='money-transf'>
<p>Element</p>
</div>
<div class='slider-div'>
<p>Inform about element</p>
</div>
<div class='money-transf'>
<p>Element2</p>
</div>
<div class='slider-div'>
<p>Inform about element2</p>
</div>

How to find the index position of the element of specific parent

I want to find the index .col in .row
When I click on .option it should give me the position of .col in .row
<div class=“row”>
<div class=“col”>
<div class=“option”>click (return 0)</div>
</div>
</div>
<div class=“row”>
<div class=“col”>
<div class=“option”>click 2 (return 1)</div>
</div>
</div>
Can anyone tell me how?
Put a click listener for it
$('.option').click(function (event) {
alert($(this).index()); // the index was $(this).index()
});
<div class=“row”>
<div class=“col”>
<div class=“option” onclick="myFunction(0)">click (return 0)</div>
</div>
</div>
<div class=“row”>
<div class=“col”>
<div class=“option” onclick="myFunction(1)">click 2 (return 1)</div>
</div>
</div>

jQuery $(this) selector accidentally selects more than 1 element

I'm using the .each() jQuery function together with the $(this) selector to effect a hovered div, but because the given divs are close to one another, the $(this) selector selects more than one element if I move the mouse too fast.
Is there any way to make sure to force $(this) not to select more than one element?
Here is my HTML:
<div class="row">
<div class="col-md-4 donation 180">
<div class="box">
<div class="cover">
<h2>Freedom<br>Package</h2>
</div>
<form class="form"></form>
</div>
</div>
<div class="col-md-4 donation 200">
<div class="box">
<div class="cover">
<h2>Sovereignty<br>Package</h2>
</div>
<form class="form"></form>
</div>
</div>
<div class="col-md-4 donation 400">
<div class="box">
<div class="cover">
<h2>Royalty<br>Package</h2>
</div>
<form class="form"></form>
</div>
</div>
</div>
And here is my jQuery:
if($(window).width() < 800 ) {
$(".form").show();
$(".cover").hide();
} else {
$(".donation").each(function() {
$(this).hover(function() {
$(this).children($(".box")).addClass("animated flipInY");
$(this).children($(".box")).children($(".cover")).fadeOut("", function() {
$(this).siblings($(".form")).show();
});
}, function() {
$(this).children($(".box")).removeClass("animated flipInY");
$(this).children($(".box")).children($(".form")).fadeOut("", function() {
$(this).siblings($(".cover")).show();
});
});
});
}
I would appreciate your help, Thank You!
You don't need to use $(this). You can use the value from each.
$(".donation").each(function(i, val) {
alert($(val).attr('class'));
});

Hiding an element through DOM traversal

What if it has few parents? (as in grandparents, great grandparents)
<div class="lvl1">
<div class="lvl1.1">
<div class="lvl1.2">
<button class="btn-submit">Click Me</button>
<div class="a1">Hello
<div>
</div>
</div>
<div class="lvl2">
<div class="b1">
<div class="b2">Make me disappear!</div>
</div>
</div>
<div class="lvl3">
<div class="c1">Thank you.
</div>
</div>
JS
$(function(){
$(".btn-submit").click(function() {
$(this).parent(".lvl1").siblings(".lvl2").children(".b2").hide();
});
});
How to use .parent, .parents, .siblings, .children, .next, .prev to show and hide the div?
If I assume that you have that structure repeated and want to remove the one in the same copy as the .btn_submit that was clicked, we go up to the .lvl1 via closest, over to the .lvl2 via .nextAll().first() (or we could just use .next), and then .find the .b2 in there:
$(".btn-submit").click(function() {
$(this).closest(".lvl1").nextAll(".lvl2").first().find(".b2").hide();
});
Your code is very close, just two things that I had to change:
Instead of using .siblings(".lvl2"), which will find all of them, I used .nextAll(".lvl2").first() to just find the one immediately after "this" .lvl1.
I used find instead of children, because children will only go down one level (direct child), not search descendants
I also used closest(".lvl1") so that if you move the .btn_submit deeper into .lvl1, it will continue working.
Live Example:
$(function() {
$(".btn-submit").click(function() {
$(this)
.closest(".lvl1")
.nextAll(".lvl2")
.first()
.find(".b2")
.hide();
});
});
<div class="lvl1">
<button class="btn-submit">Click Me</button>
<div class="a1">Hello
</div>
</div>
<div class="lvl2">
<div class="b1">
<div class="b2">Make me disappear!</div>
</div>
</div>
<div class="lvl3">
<div class="c1">Thank you.
</div>
</div>
<div class="lvl1">
<button class="btn-submit">Click Me</button>
<div class="a1">Hello
</div>
</div>
<div class="lvl2">
<div class="b1">
<div class="b2">Make me disappear!</div>
</div>
</div>
<div class="lvl3">
<div class="c1">Thank you.
</div>
</div>
<div class="lvl1">
<button class="btn-submit">Click Me</button>
<div class="a1">Hello
</div>
</div>
<div class="lvl2">
<div class="b1">
<div class="b2">Make me disappear!</div>
</div>
</div>
<div class="lvl3">
<div class="c1">Thank you.
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
there is possible to disappear div directly using,
$(".b2").hide();
but if you want to use ".parent, .parents, .siblings, .children, .next, .prev",
$(".btn-submit").parent().siblings(".lvl2").children().children(".b2").hide();
need to you children() Two times... because .b2 is not directly child to .lvl2,
another best way to hide ".b2" is,
$(".btn-submit").parent().siblings(".lvl2").find(".b2").hide();
so your Ans is:
$(".btn-submit").click(function() {
$(".btn-submit").parent().siblings(".lvl2").find(".b2").hide();
});
.children selects the children and not descendants of the element. You just need to replace the .children with the .find method and your code will select the target element.

clone a div and insertAfter last child of siblings within relative parents

My markup like this:--
<div class="wrap">
<div class="a"></div>
<div class="a"></div>
<button type="button">press</button>
</div>
.
.
.
<div class="wrap">
<div class="z"></div>
<button type="button">press</button>
</div>
I want when I click the button it clone only one closest siblings and insert the clone div after the last siblings within relative parent div.wrap. I know how to clone with jQuery but I couldn't insert the cloned div after last siblings within relative parent .
You can use .before() to insert before the button and .prev() to clone the div above the button:
$('.wrap > button').on('click', function() {
$(this).before( $(this).prev().clone() );
});
$('.wrap > button').on('click', function() {
$(this).before( $(this).prev().clone() );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
<div class="a">A1</div>
<div class="a">A2</div>
<button type="button">press</button>
</div>
<div class="wrap">
<div class="z">Z1</div>
<button type="button">press</button>
</div>
If I understand correctly, you should be able to use .prev() to find the previous div, then append a clone using .after().
$(".wrap button").click(function() {
var prev = $(this).prev("div");
prev.after(prev.clone());
});
div {
margin: 5px;
}
.a {
height: 100px;
width: 100px;
background-color: green;
}
.z {
height: 100px;
width: 100px;
background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="wrap">
<div class="a"></div>
<button type="button">press</button>
</div>
<div class="wrap">
<div class="z"></div>
<button type="button">press</button>
</div>
if i correctly understood problem
$('button').on('click', function(){
var siblings = $(this).siblings();
siblings.last().clone().insertAfter(siblings.last() )
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="wrap">
<div class="a">a1</div>
<div class="a">a2</div>
<button type="button">press</button>
</div>
.
.
.
<div class="wrap">
<div class="z">z1</div>
<button type="button">press</button>
</div>

Categories