So, I have the following php and js markup:
<div class="top" data-id="<?php echo $id; ?>">
<div class="middle">
Click
</div>
<div class="info"> <!--Note that I am targeting a child div -->
<div class="name">
Steve
</div>
</div>
</div>
Then for my js:
jQuery(document).on( 'click', '.middle', function(e) {
var my_id= jQuery(this).parent('.top').data("id");
});
At this point, when the middle div is clicked, the js var my_id is equal to the data_id of its top parent div (with .top).
Now, I want to save another div as below (simple html).
var my_name = $('.name').html();
How do I target the specific .name class within the specific `data-id' div?
You could use the .siblings() method to select all the sibling elements of .middle, and then use .find() to find any descendant .name elements:
jQuery(document).on( 'click', '.middle', function(e) {
var my_id= jQuery(this).parent('.top').data("id");
var my_name = jQuery(this).siblings().find('.name').html();
});
Use the parent and find methods.
var current;
$(document).on( 'click', '.middle', function(e) {
var my_id= $(this).parent('.top').data("id");
current = $(this).parent().find('.name');
console.log($(current).html());
});
Edit: John Crozier's answer is more complete. Beat me to it :)
Related
I have a list of items on my page from a DB table
I am trying to change the glyphicon when checked
<div class="div1">
<span id=".<?php echo $row['id']; ?>" style="color:black;" class="glyphicon glyphicon-eye-open"> </span>
</div>
this is the script on the top of my page:
<script>
$(document).ready(function(){
$(".div1").click(function(){
$(".div1").load("clicked.php");
});
});
</script>
clicked.php looks like:
<span id="<?php echo $row['id']; ?>" style="color:black;" class="glyphicon glyphicon-ok"> </span>
The problom is the when I click on one item - all the items change there glyphicons
What am I doing wrong?
You just have to remove & add new class:
$(document).ready(function(){
$(".div1").click(function(){
$(this).children('span').removeClass('glyphicon-eye-open');
$(this).children('span').addClass('glyphicon-ok');
//Here you can add ajax call
});
});
There is no need to go all the way to the server to get a new span when all you are doing is removing a class and adding a new class to a span.
Also using the right scope, $(this) will stop it effecting all your div1 elements.
<script>
$(document).ready(function(){
$(".div1").click(function(){
//$(".div1").load("clicked.php");
$(this).children('span').removeClass('glyphicon-eye-open');
$(this).children('span').addClass('glyphicon-ok');
});
});
</script>
And to make the code toggle from one to another on each click
<script>
$(document).ready(function(){
$(".div1").click(function(){
if ( $(this).children('span').hasClass('glyphicon-ok') ) {
$(this).children('span').removeClass('glyphicon-ok');
$(this).children('span').addClass('glyphicon-eye-open');
} else {
$(this).children('span').removeClass('glyphicon-eye-open');
$(this).children('span').addClass('glyphicon-ok');
}
});
});
</script>
So, I have the following php:
<div class="top" data-id="<?php echo $id; ?>">
<div class="middle">
Click
</div>
</div>
Then for my js:
jQuery(document).on( 'click', '.middle', function(e) {
var my_id= jQuery(this).data("id"); ???
}
So at the current setup, when the '.middle' class is clicked, then I want to target the ".top" class and save the data-id.
I can use jQuery(this).parents('.top'); but I am not sure how to combine them together.
My question is, how do I target the parents (top) then save the data-id variable?
Thanks
You can use .parent() and chain it for other function invocations.
jQuery(document).on( 'click', '.middle', function(e) {
var my_id= jQuery(this).parent(".top").data("id");
});
And in the place of document, try to use any closest static parent of .middle
$(function() {
$('.middle').on('click', function() {
var id = $(this).closest('.top').data('id');
});
});
I have a listing of products each with differnt ID. Now on frontend I want to get prodouct data(say, name,price and a addtocart button) on mousover.
Here is my code:
This is in loop to get all products:
HTML:
<div class="prod">
<a class="product-image pi_470" title="Cushion Tsavorites" href="/tsavorite/cushion-tsavorites-1328.html"><img height="135" width="135" alt="Cushion Tsavorites" src="/small_image.jpg"></a>
<div style="display: none; margin: -65px 0px 0px 5px; position: absolute; z-index: 30;" class="mouse_hover_470">
<input type="hidden" id="prod_id" value="470">
<h2 class="product-name"><a title="Cushion Tsavorites" href="/tsavorite/cushion-tsavorites-1328.html">Cushion Tsavorites</a></h2>
<div class="price-box">
<span id="product-price-470" class="regular-price">
<span class="price">$387.15</span>
</span>
</div>
<div class="actions">
<button onclick="setLocation('http://dev614.trigma.us/chocolate/index.php/checkout/cart/add/uenc/aHR0cDovL2RldjYxNC50cmlnbWEudXMvY2hvY29sYXRlL2luZGV4LnBocC90c2F2b3JpdGUuaHRtbA,,/product/470/form_key/4BR7w0TqeeO9AC0g/')" class="button btn-cart" title="Add to Cart" type="button"><span><span>Add to Cart</span></span></button>
</div>
</div>
</div>
jQuery:
jQuery(document).ready(function() {
var bla = jQuery('#prod_id').val();
jQuery(".pi_" + bla).mouseover(function() {
//alert("hello");
jQuery(".mouse_hover_" + bla).css("display", "block");
});
jQuery(".pi_" + bla).mouseout(function() {
jQuery(".mouse_hover_" + bla).css("display", "none");
});
});
But Iam getting only data of first product on mouseover. Its not working for rest of products
Looks like you are executing the above block of code in a loop, once per each product. In that case the problem is jQuery('#prod_id').val(); it will always return the value of first element with id prod_id.
In your case you don't have to do that, you can
jQuery(function ($) {
$('.prod .product-image').hover(function () {
$(this).next().show();
}, function () {
$(this).next().hide();
})
});
There is a much, much easier way to do this:
jQuery(document).ready(function() {
jQuery(".product-image").hover(function() {
$(this).next().show();
}, function() {
$(this).next().hide();
});
});
Demo: JSBin
You can use each() function in jQuery
NOTE: Instead of using id="prod_id", use class, i.e class="prod_id". Since you told that the div is dynamically created it is using the same id attribute
Now loop the product div on ready function
jQuery(document).ready(function() {
jQuery('.prod').each(function(){
var bla = jQuery('.prod_id').val();
jQuery(".pi_" + bla).on('mouseover',function() {
//alert("hello");
jQuery(".mouse_hover_" + bla).css("display", "block");
});
jQuery(".pi_" + bla).on('mouseout',function() {
jQuery(".mouse_hover_" + bla).css("display", "none");
});
});
});
You can checkout this jQuery each()
Ashi,
try using
var bla = jQuery(input[id*='prod_id']).val();
instead of
var bla = jQuery('#prod_id').val();
This will give you all the hidden inputs so loop all of them and bind the mouseover event.
For example:
jQuery(input[id*='prod_id']).each(function(){
var bla = jQuery(this).val();
//carry out your logic..
// you can use jquery().live('mouseover'function(){}) for dynamically created html
});
Hope this will work!!
Cheers!!
function handler(ev) {
var target = $(ev.target);
var elId = target.attr('id');
if( target.is(".el") ) {
alert('The mouse was over'+ elId );
}
}
$(".el").mouseleave(handler);
http://jsfiddle.net/roXon/dJgf4/
Hey folks I have content being displayed on a page by using jQuery and Ajax to query my php page. On click I check for all elements with the class edit. I am trying to then grab the unique id of the link that was chosen. I know it should be this.id but it returns nothing. Does anyone have any insight on how to dynamically check the clicked link and get a stored value in any way?
The bellow works for getting a link clicked. but cannot get the id still.
$("body").on("click", ".edit", function(){
var id = this.id;
alert($(this).val());
});
Here is the HTML that is being put on the page via Ajax
<div class="row">
<div class="small-2 large-2 columns">3</div>
<div class="small-10 large-6 columns">Andrew</div>
<div class="small-6 large-2 columns">2013-08-12</div>
<div class="small-6 large-2 columns edit"> Edit </div>
</div>
Solved solution was to use '.edit > a' as the selector. I had edit as the class of the div, not the anchor tag. Thanks for all the help folks!
The sample HTML helped:
You need to select the anchor within the .edit div.
$("body").on("click", ".edit > a", function () {
var id = this.id;
alert(id);
});
JSFiddle: http://jsfiddle.net/QckbT/
Does this works ?
$("a.edit").on("click", function(){
alert($(this).val());
});
alert($(this).val());
relate to body, not to #id.
for example ive got a div like:
<div class="y1">
<img src="i/o.png" />
</div>
and
<!-- pre load -->
<div class="p1" style="display:none">
<h5 class="ob">Title</h5>
<img class="ob" src="i/ob.png" />
<small class="ob">Description</small>
PLAY
</div>
and this jquery
<script type="text/javascript">
$("div.y1").hover(
function () {
$('div.p1').slideDown('slow', function() {
});
}
);
</script>
my question is how can i repeat it for 12 times. i mean when i hover on y1, show p1, y2 => p2, y3 => p3 ... y12 => p12. i hope you guys understand me. thank you so much!!!!
Should look like:
$(function(){
$('div[class^=y]').hover(function(){
var self = $(this),
number = this.className.slice(1);
$('div.p' + number).slideDown('slow', function() {
});
}, function() {
var self = $(this),
number = this.className.slice(1);
$('div.p' + number).slideUp('slow', function() {
});
});
});
Example: http://www.jsfiddle.net/Q5Ug2/
I'm going to assume that your y# divs are inside a div with the id container. Secondly, I'm going to assume that none of your y# divs have any other classes applied to them.
$('#container').delegate('div[class^=y]','mouseenter', function(){
$('div.p' + this.className.slice(1)).slideDown('slow');
}).delegate('div[class^=y]', 'mouseleave', function(){
$('div.p' + this.className.slice(1)).slideUp('slow');
});
This uses delegate to avoid the cost of binding to multiple DOM elements.
Edit To hide the p# div on hovering on another element, you can use this code.
$('#container').delegate('div[class^=y]','mouseenter', function(){
$('div.p' + this.className.slice(1)).slideDown('slow').siblings().slideUp();
});
Do things a bit differently..
Use ID's for the p# and y# series indicators.
On your DIV tags for the p# series, add a title of the y# series.. so <div id="p1" title="y1">
On your DIV tags for the y# series, add a class.. <div id="y1" class="hoverMe">
$('div.hoverMe').hover( function() {
$('[title=' + $(this).attr('id') + ']').slideDown('slow');
});