I want to have a function that will fadeIn() a div with class image on hover on another class. However there are multiple divs from each class and would like to have each div correspond to another. I havet hought about using index() to get the inex number of each class and then equal each index number to only display the one corresponding.
To clarify I'll express it as code:
<div class="container">
<div class="woot"></div>
<div class="woot"></div>
<div class="woot"></div>
<div class="woot"></div>
<div class="woot"></div>
</div>
<div class="img_container">
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
</div>
The idea is that when hovering the first woot div it will display the first image div, if hovering the second one it will display the second one and the same process for the rest.
<div class="container">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
//use css selection in jquery
$('container span:nth-child(1))
$('container span:nth-child(2))
$('container span:nth-child(3))
$('container span:nth-child(4))
I hope this will help you.
Try the code below:
$(document).ready(function() {
$(".woot").hover(
function() {
$(".image:eq(" + $(this).index() + ")").show();
},
function() {
$(".image:eq(" + $(this).index() + ")").hide();
}
);
});
.woot {
width: 100px;
height: 100px;
background-color: black;
}
.image {
width: 100px;
height: 100px;
background-color: blue;
display: none;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="woot"></div>
<div class="woot"></div>
<div class="woot"></div>
<div class="woot"></div>
<div class="woot"></div>
</div>
<div class="img_container">
<div class="image">1</div>
<div class="image">2</div>
<div class="image">3</div>
<div class="image">4</div>
<div class="image">5</div>
</div>
With this solution, you got to set ALL the .img_container div to display:none.
CSS
.img_container div{display:none;}
jQuery
$('.container div').on('mouseenter', function(){
var indx = $(this).index();
$('.img_container div').eq(indx).show();
})
$('.container div').on('mouseleave', function(){
var indx = $(this).index();
$('.img_container div').eq(indx).hide();
})
JSFIDDLE: http://jsfiddle.net/sz7am8Lt/.
With this solution you got to set ALL the .img_container div to visibility:hidden.
CSS
.img_container div{visibility:hidden;}
jQuery
$('.container div').on('mouseenter', function(){
var indx = $(this).index();
$('.img_container div').eq(indx).css('visibility','visible');
})
$('.container div').on('mouseleave', function(){
var indx = $(this).index();
$('.img_container div').eq(indx).css('visibility','hidden');
})
JSFIDDLE: http://jsfiddle.net/sz7am8Lt/1/.
Related
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>
I want to show information based on the item that it is clicked on.
I have some jquery code that works, but not when there are multiple div's in a div.
Here, the first part is what I want, the second part doesn't work because there are div's in the main div. hope that makes sense. How do i make it work?
I think it has something to do with :
$("#parent2").find("div:eq('" + i + "')").show().siblings().hide();
Fiddle
You have to toggle direct descendants, if you just find('div') it will find nested too.
So you can do either this:
$("#parent2 > div:eq('" + i + "')").show().siblings().hide();
or this:
$("#parent2").children("div:eq('" + i + "')").show().siblings().hide();
You need to use children() instead of .find() and .index(element) can be used to get index of anchor element to be displayed.
$(document).ready(function() {
$('#div1, #div2, #div3, #div4').hide();
$('#div5, #div6, #div7, #div8').hide();
$(".firstpart a").click(function() {
$("#parent1").children("div").eq($(".firstpart a").index(this)).show().siblings().hide();
});
$(".secondpart a").click(function() {
$("#parent2").children("div").eq($(".secondpart a").index(this)).show().siblings().hide();
});
});
Fiddle
Additionally, You don't need .each() to bind event handler.
https://jsfiddle.net/5yyrojsq/4/ You should try to use declarative JS and use classes instead of ID to match elements.
<div class="firstpart">
show div1
show div2
show div3
show div4
</div>
<div id="parent1">
<div id="div1" class="child_div">hello1</div>
<div id="div2" class="child_div">hello2</div>
<div id="div3" class="child_div">hello3</div>
<div id="div4" class="child_div">hello4</div>
</div>
and the JS
$(document).ready(function(){
$('.child_div').hide();
$(".btn").click(
function () {
$('.child_div').hide();
var the_div_id_to_show = $(this).attr("data-show");
$("#" + the_div_id_to_show).show("slow");
}
);
});
I have simplified the problem to show the general principle as opposed to the specific answer.
You should try doing a toggle() instead of show/hide and then do that on click, like this:
$(this).on('click', function() {
$("#parent1").find("div:eq('" + i + "')").toggle().siblings();
)};
Try this ;)
Used a class with div to access them in eq()
$(document).ready(function() {
var $parent1 = $("#parent1");
var $parent2 = $("#parent2");
$(".firstpart a").each(function(i) {
$(this).click(function() {
$('.item:visible', $parent1).hide();
$parent1.find("div:eq('" + i + "')").show();
});
});
$(".secondpart a").each(function(i) {
$(this).click(function() {
$('.item:visible', $parent2).hide();
$parent2.find("div.item:eq('" + i + "')").show();
});
});
});
.item {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="firstpart">
show div1
show div2
show div3
show div4
</div>
<div id="parent1">
<div id="div1" class="item">hello1</div>
<div id="div2" class="item">hello2</div>
<div id="div3" class="item">hello3</div>
<div id="div4" class="item">hello4</div>
</div>
<br>
<br>
<br>
<div class="secondpart">
show div5
show div6
show div7
show div8
</div>
<div id="parent2">
<div id="div5" class="item">
<div class="row5">hello5</div>
</div>
<div id="div6" class="item">
<div class="row6">hello6</div>
</div>
<div id="div7" class="item">
<div class="row7">hello7</div>
</div>
<div id="div8" class="item">
<div class="row8">hello8</div>
</div>
</div>
I would change this to make your code more accesible and make use of the anchors href:
// probably want to change this to target a class rather than all anchors
$("a").click(function(e) {
e.preventDefault(); // stop default action of anchor
$($(this).attr('href')).show().siblings().hide(); // show the targetted div and hide it's siblings
});
.parent > div {display:none;} /*start divs hidden*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="firstpart">
show div1 <!-- give anchors href of the div they are targeting, maybe a class too -->
show div2
show div3
show div4
</div>
<div id="parent1" class="parent">
<div id="div1">hello1</div>
<div id="div2">hello2</div>
<div id="div3">hello3</div>
<div id="div4">hello4</div>
</div>
<br><br><br>
<div class="secondpart">
show div5
show div6
show div7
show div8
</div>
<div id="parent2" class="parent">
<div id="div5"><div class="row5">hello5</div></div>
<div id="div6"><div class="row6">hello6</div></div>
<div id="div7"><div class="row7">hello7</div></div>
<div id="div8"><div class="row8">hello8</div></div>
</div>
Updated your same piece of code using toggle() instead of show() and hide()
HTML
<div class="firstpart">
show div1
show div2
show div3
show div4
</div>
<div id="parent1">
<div id="div1">hello1</div>
<div id="div2">hello2</div>
<div id="div3">hello3</div>
<div id="div4">hello4</div>
</div>
<br><br><br>
<div class="secondpart">
show div5
show div6
show div7
show div8
</div>
<div id="parent2">
<div id="div5">hello5</div>
<div id="div6">hello6</div>
<div id="div7">hello7</div>
<div id="div8">hello8</div>
</div>
jQuery
$(document).ready(function(){
$('#div1, #div2, #div3, #div4').toggle();
$(".firstpart a").each(function(i) {
$(this).click(function() {
$("#parent1").find("div:eq('" + i + "')").toggle().siblings();
});
});
});
$(document).ready(function(){
$('#div5, #div6, #div7, #div8').toggle();
$(".secondpart a").each(function(i) {
$(this).click(function() {
$("#parent2").find("div:eq('" + i + "')").toggle().siblings();
});
});
});
Fiddle
I think this will work for your 'parent2' div:
$("#parent2").children("div:eq('" + (i) + "')").show().siblings().hide();
});
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>
I want the height of .pst to be increased if it contains a child class .pa , the code below doesn't work, and if i use '.pst' instead of this keyword all the div elements with .pst changes. Help!
window.onload = function() {
if($('.pst').contents().find('.pa').length !=0){
$(this).css('height','+=200px');
}
}
<div class="pst">
<div class="pa"></div>
<div class="pa"></div>
<div class="pa"></div>
<div class="pa"></div>
</div>
<div class="pst">
<div class="pb"></div>
<div class="pb"></div>
<div class="pb"></div>
<div class="pb"></div>
</div>
You can simplify it with :has selector:
window.onload = function() {
$('.pst:has(.pa)').css('height', '+=200px');
}
Above will select and increase height of only those .pst which have .pa descendants.
No need to check contents, just target the class combination you want using $('.pst .pa'). Then you can loop the items using each().
Here's a runnable snippet:
$(function() {
$('.pst .pa').each(function() {
$(this).css('height','+=200px');
});
});
.pa {background-color: blue; margin: 5px; height:50px; width:50px; float:left}
.pb {background-color: blue; margin: 5px; height:50px; width:50px; float:left}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="pst">
<div class="pa"></div>
<div class="pa"></div>
<div class="pa"></div>
<div class="pa"></div>
</div>
<div class="pst">
<div class="pb"></div>
<div class="pb"></div>
<div class="pb"></div>
<div class="pb"></div>
</div>
I want the height of .pst to be increased if it contains a child class .pa
You are using $(this) in if condition which refers to the global window object not to the current .pst element.
Consider using each:
$('.pst').each(function(){
if($(this).find('.pa').length){
$(this).css('height','+=200px');
}
});
I'm fairly new to jquery and cannot figure this out. I have 3 divs with different id's but all start with "sharedform". I want to loop through those divs, grab each id and assign it as an identifying class to the 'slideHead' div preceding each. Any help would be greatly appreciated!
HMTL:
<div class="slideHead">
</div>
<div class="drawer">
<div id="sharedform.upload_image">
<p></p>
</div>
</div>
<div class="slideHead">
</div>
<div class="drawer">
<div id="sharedform.Event">
<p></p>
</div>
</div>
<div class="slideHead">
</div>
<div class="drawer">
<div id="sharedform.BackGround_All">
<p></p>
</div>
</div>
jquery:
var $getclass = $(".drawer");
addclass = $getclass.find('[id^="sharedform"]').attr('id');
$(".slideHead").addClass(addclass);
I'd suggest:
// get all elements whose id starts with 'sharedform', iterate over that collection:
$('div[id^=sharedform]').each(function (){
// find the parent of the 'this' element:
$(this).parent()
// find the previous element, if it matches the passed-in selector:
.prev('.slideHead')
// add the id of the element we initially selected as a class:
.addClass(this.id);
});
$('div[id^=sharedform]').each(function() {
$(this).parent().prev('.slideHead').addClass(this.id);
});
div {
width: 80%;
margin: 0 auto;
min-height: 2em;
padding: 0.5em;
border: 1px solid #000;
}
.slideHead {
background-color: #f00;
}
.slideHead.sharedform\.something {
background-color: #0f0;
}
<div class="slideHead"></div>
<div>
<div id="sharedform.something">some text in the div</div>
</div>
But note that those class-names are problematic, given the inclusion of a period (.) in the id.
This should do it:
$('[id^=sharedform]').each(function() {
$(this).closest('.drawer').prev().addClass( this.id );
});
$('[id^=sharedform]').each(function() {
$(this).closest('.drawer').prev().addClass( this.id );
});
var newHTML = $('body').html(),
out = $('<pre/>', {class:'out'}).appendTo( 'body' );
out.text( 'NEW HTML\n' + newHTML );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slideHead">
</div>
<div class="drawer">
<div id="sharedform.upload_image">
<p></p>
</div>
</div>
<div class="slideHead">
</div>
<div class="drawer">
<div id="sharedform.Event">
<p></p>
</div>
</div>
<div class="slideHead">
</div>
<div class="drawer">
<div id="sharedform.BackGround_All">
<p></p>
</div>
</div>