Individual jquery actions for each div - javascript

Here is the original structure:
<div class="out">
<div class="in">
</div>
</div>
<div class="out">
<div class="in">
</div>
</div>
<div class="out">
<div class="in">
</div>
</div>
and I add jquery to toggle the "in" div.
$(document).ready(function() {
$(".in").hide();
$('.out').hover(function() {
$(".in").slideToggle(100);
});
});
see FIDDLE DEMO
However, it controls all the objects, and I don't know how to perform them individually.
Thanks!


Use context selector
$(".in", this).slideToggle(100);
Code
$(document).ready(function() {
$(".in").hide();
$('.out').hover(function() {
$(".in", this).slideToggle(100);
});
});
Check Fiddle


Make the .in selector relative to this:
$(document).ready(function() {
$(".in").hide();
$('.out').hover(function() {
$(this).find(".in").slideToggle(100);
});
});
Corrected fiddle


Try this
$(document).ready(function() {
$(".in").hide();
$('.out').hover(function() {
$(this).children(".in").slideToggle(100);
});
});
updated jsFiddle File


Use this as the context selector in the call to jQuery, like this:
$(".in",this)
Full code:
$(document).ready(function() {
$(".in").hide();
$('.out').hover(function() {
$(".in",this).slideToggle(100);
});
});
Fiddle: http://jsfiddle.net/kfBDJ/5/

Related

Jquery addclass on hover

I have this structure
<div class="container">
<a> <img /> </a>
<div id="actions"></div>
<ul id="add-to"> </ul>
</div>
and I'm using a script like this
<script>
jQuery(function() {
jQuery("#actions, #add-to").hover(function(){
jQuery(this).prev('a').addClass('opacity');
}, function() {
jQuery(this).prev('a').removeClass('opacity');
});
});
</script>
it does work when hover on the actions element id, but not with the #add-to.
Can you help me with this?
thanks

prev() only select immediate previous element, a is not immediately previous to#add-to. In this case you can use siblings() or prevAll() . while using prevAll() use first() to get closest one
<script>
jQuery(function() {
jQuery("#actions, #add-to").hover(function(){
jQuery(this).siblings('a').addClass('opacity');
}, function() {
jQuery(this).siblings('a').removeClass('opacity');
});
});
</script>
or
<script>
jQuery(function() {
jQuery("#actions, #add-to").hover(function(){
jQuery(this).prevAll('a').first().addClass('opacity');
}, function() {
jQuery(this).prevAll('a').first().removeClass('opacity');
});
});
</script>

Return text from div when click some link from this div

I need return text from div.
When I click on Click me, I want to alert with text from div class='show_mail_middle'
<div class='show_mail'>
<div class='show_mail_top'><p class='cli'>click me</p></div>
<div class='show_mail_middle'>1</div>
</div>
<div class='show_mail'>
<div class='show_mail_top'><p class='cli'>click me</p></div>
<div class='show_mail_middle'>2</div>
</div>
<div class='show_mail'>
<div class='show_mail_top'><p class='cli'>click me</p></div>
<div class='show_mail_middle'>3</div>
</div>
Thank you for help!

Use by Pure JavaScript.
var allDiv = document.getElementsByClassName('show_mail_top');
for(var i=0; i<allDiv.length; i++){
allDiv[i].onclick = function (){
alert(this.nextElementSibling.innerHTML);
}
}
DEMO

$('body').on("click",".show_mail_top",function(){
alert($(this).find("p").text());
});

You can use combination of .closest() & .next()
Use
$('.cli').click(function () {
alert($(this).parent().next('.show_mail_middle').text());
});
DEMO
OR
$('.cli').click(function () {
alert($(this).closest('.show_mail_top').next('.show_mail_middle').text());
});
DEMO 2

$(".show_mail_top").click(function() {
$(this).parent().children(".show_mail_middle").text();
});

Try:
$('p.cli').click(function(){
alert($('div.show_mail_middle').text())
});

Demo
$('.cli').click(function() {
var text = $(this).parents('.show_mail').find('.show_mail_middle').html();
alert(text);
});

Fiddle Demo
$('.cli').click(function () {
alert($(this).closest('div').next().text());
});
or Fiddle Demo
$('.cli').click(function () {
alert($(this).parent().next().text());
//^get parent element div of current element with class .cli which
//clicked and than find next div element n get it's text
});
.closest()
.next()
this keyword

Jquery attr not working Internet Explorer

I have the code below that clicking on an image hides a div.
Works perfectly, but does not work in IE ...
Why?
http://jsfiddle.net/mtsys/6qAfp/
codes:
$(document).ready(function () {
$('.fechar').click( function() { alert('testes'); $(".nav").attr("hidden",true); });
$('.mais').click( function() {
var status = $(".nav").attr("hidden");
if (status)
{
$(".nav").attr("hidden",false);
}
else
{
$(".nav").attr("hidden",true);
}
});
});
HTML:
<div class="header">
Estágio
<div class="mais"></div>
</div>
<div class ="parent">
<div class="content">
<div id="map_canvas" style="width: 100%; height: 100%;"></div>
</div>
<div class="nav"><div class="fechar"></div><div id="dadosDiv"></div></div>
</div>
tks

Use .hide() and toggle() to change the display of the elements
$('.fechar').click(function () {
$(".nav").hide()
});
$('.mais').click(function () {
$(".nav").toggle()
});
Demo: Fiddle

Why not change your JS to:
$('.fechar').click( function() { alert('testes'); $(".nav").hide(); });
$('.mais').click( function() {
$(".nav").toggle();
});
This will not only simplify your code but utilise jQuery's inbuilt function for toggling content visibility. Incidentally, the issue was the hidden attr reference, this should have been .css('hidden',true) if you want to go down that route...

JQuery Is not working properly on mouseenter and mouseleave

Hi I am making an effect that is when Mouse Enter in div one button shows in that div and when user mouse leave that area again button hide.
It works but the problem is that I have used div many times so I have used class for div definition.
So when Mouse enter in one div other div also affected.
Code :
jQuery:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#container").mouseenter(function(){
$(":button").show();
});
$("#container").mouseleave(function(){
$(":button").hide();
});
});
</script>
jsp code :
<div id="container">
<div class="mainitemlist">
<div class="mainitemlistimage">
<a href="product?pid=3">
<img src="product_images/Tulips1760331818.jpg" height="125px" width="100px" style="border-radius:2px;">
</a>
</div>
<div class="mainitemlistname"><div align="center">Nokia Lumia 925</div></div>
<div class="mainitemlistprice"><div align="center">38000</div></div>
<div class="mainitemlistfeatures"><div align="center">null</div>
<button type="button" style="display: none;">Hide me</button></div>
</div>
<div class="mainitemlist">
<div class="mainitemlistimage">
<a href="product?pid=5">
<img src="product_images/Jellyfish456319058.jpg" height="125px" width="100px" style="border-radius:2px;">
</a>
</div>
<div class="mainitemlistname"><div align="center">HCL Me</div></div>
<div class="mainitemlistprice"><div align="center">40000</div></div>
<div class="mainitemlistfeatures"><div align="center">null</div>
<button type="button" style="display: none;">Hide me</button></div>
</div>
</div>
I have try to put Jquery on class="mainitemlist" but It's not working.
So I have added in id="container".
Anyone have idea, why it's not working ???

You can do this:
$(document).ready(function () {
$(".mainitemlist").mouseenter(function () {
$(this).find(":button").show();
}).mouseleave(function () {
$(this).find(":button").hide();
});
});
Demo: Fiddle
When you used the class mainitemlist you were not using the function scope properly using $(this) and hence it showing all the button on mouseenter, since you used the code:
$(":button").show();
UPDATE
$(document).ready(function () {
$(document).on('mouseenter', '.mainitemlist', function () {
$(this).find(":button").show();
}).on('mouseleave', '.mainitemlist', function () {
$(this).find(":button").hide();
});
});

try:
$(document).ready(function(){
$("#container").mouseenter(function(){
$("#container button").show();
});
$("#container").mouseleave(function(){
$("#container button").hide();
});
});
check out this fiddle.
b.t.w, you have 2 divs with the id of container. this is probably a mistake, and if not, it's bad practice.
hope that helps.

$("#container").mouseenter(function(){
$(this).find('#yourbutton').show();
});
$("#container").mouseleave(function(){
$(this).find('#yourbutton').hide();
});

Toggle a div to be closed on load?

The following function toggles a div when clicked on the relative id. Any way to set it up so that when the page loads, the div being toggled starts out closed?
I dont want them to be seen until clicked on.
Best,
Joey
<script type="text/javascript">
$(document).ready(function() {
$("#architects").click(function() {
$(".exclusive-architects").toggle();
});
$("#international").click(function() {
$(".exclusive-international").toggle();
});
$("#designers").click(function() {
$(".exclusive-designers").toggle();
});
$("#historical").click(function() {
$(".exclusive-historical").toggle();
});
});
</script>

Just hide them on dom ready, like this:
<script type="text/javascript">
$(document).ready(function() {
$(".exclusive-architects, .exclusive-international,
.exclusive-designers, .exclusive-historical").hide();
$("#architects").click(function() {
$(".exclusive-architects").toggle();
});
$("#international").click(function() {
$(".exclusive-international").toggle();
});
$("#designers").click(function() {
$(".exclusive-designers").toggle();
});
$("#historical").click(function() {
$(".exclusive-historical").toggle();
});
});
</script>

You should just need to add a display:none to your starting CSS

DEMO
if your HTML looks like this:
<div id="buttons">
<div>toggle architects</div>
<div>toggle international</div>
<div>toggle designers</div>
<div>toggle historical</div>
</div>
<div class="cont"> architects content </div>
<div class="cont"> international content </div>
<div class="cont"> designers content </div>
<div class="cont"> historical content </div>
Than all you need is:
$('.cont').hide(); // HIDE ALL INITIALLY
$('#buttons div').click(function(){
$('.cont').eq( $(this).index() ).toggle();
});

$(function(){ // DOM ready
$(".exclusive-architects").hide();
$(".exclusive-international").hide();
$(".exclusive-designers").hide();
$(".exclusive-historical").hide();
});
it should work :)

Categories

Resources