Retrieve value stored in array with jquery index

Question

When a user clicks on a div tag, I want to store the corresponding id value in var current, so that it can later be used to iterate to that index, and so that div can be shown and hidden.

html

<div class="gallerypreview" id="1"></div>
<div class="gallerypreview" id="2"></div>
<div class="gallerypreview" id="3"></div>

js

var images = new Array();

$(document).ready( function(){

$('.gallerypreview').each(function() {
    images.push($(this).attr("id"));
});

$('.gallerypreview').click(function() {
var current = $('.gallerypreview').index(this);
});

});

How would I go about retrieving the div id from this clicked div? I can get the index number fine, but I cannot find the value of the index using any functions that utilizes the index #.

Never begin an ID or class with a number (http://stackoverflow.com/a/79022/1418261). It can cause some browsers to not interpret the ID properly. — Jason, Jun 04 '14 at 21:26
It looks like you are coding yourself in circles just to get a reference to a clicked div. It doesn't seem like you need the array, the iterator, even the element ids. You can get a reference to the clicked element by simply: `var current; $('.gallerypreview').click(function(){current = this;});` What are you actually trying to do? — gilly3, Jun 04 '14 at 21:41

lordphnx · Answer 1 · 2014-06-04T21:29:43.510

0

Is this what you are looking for?

$('.gallerypreview').click(function() {
var current = $(this).attr("id");
});

Inside the click callback function $(this) references the specific DOM object that was clicked. So a simple .attr("id") will get you the id for the clicked div (stored in the variable current).

Hope that helps

edited Jun 04 '14 at 21:29

answered Jun 04 '14 at 21:23

lordphnx

71
7

I need to get the id from the index only... this is bascially for an image slider, once the first div class is clicked, i need to use a moveLeft and moveRight function to find the index and use it to hide/show the next index, not the one clicked. hope that makes sense. – Dustin Jun 04 '14 at 21:31

score 0 · Answer 2 · answered Jun 04 '14 at 21:28

0

var images = new Array();

$(function() {

   $('.gallerypreview').each(function() {
      images.push($(this).attr("id"));
   });

   var current = null;
   $('.gallerypreview').click(function() {
      current = $(this).attr('id');
   });
});

answered Jun 04 '14 at 21:28

GGio

7,563
11
44
81

score 0 · Answer 3 · answered Jun 04 '14 at 21:30

http://jsfiddle.net/7fPL5/

Addresses the click issue, as well as changes the IDs to valid HTML/CSS IDs (stackoverflow.com/a/79022/1418261).

JS

var images = new Array();

$(document).ready( function(){

$('.gallerypreview').each(function() {
    images.push($(this).attr("id"));
});

$('.gallerypreview').click(function() {
var current = $('.gallerypreview').index(this);
    alert(current.attr("id"));
});

});

HTML

<div class="gallerypreview" id="one">1</div>
<div class="gallerypreview" id="two">2</div>
<div class="gallerypreview" id="three">3</div>

score 0 · Answer 4 · answered Jun 04 '14 at 21:32

Depending on the scope of the variable current declare it appropriately:

var images = new Array(), current;

Then change the following:

$('.gallerypreview').click(function() {
var current = $('.gallerypreview').index(this);
});

To:

$('.gallerypreview').on('click', function() {
    current = this.id;
});

JS FIDDLE DEMO

Retrieve value stored in array with jquery index

4 Answers4