Set index in jQuery
I am working with arrays in jQuery and I have all the elements from the named array images
displayed on the web page. When one of the elements is clicked (which is what I am using .click()
), I need to find the index of that element in the array and make index =
that value. How will this be done? Thank.
source to share
What code will do this?
I'm still trying to figure out what your actual question is, but assuming you are asking what is this
in the line of code you posted ....
$('.large_view').prepend('<img src="'this'" width="450px"/>');
basically, it this
is an object window
in the current context. However, if the line of code above is inside a callback like a callback click
...
$('.next').click(function(){
var context = this;
});
in this case it this
will be the element .next
that raised the event click
. So basically the line of code below ...
$('.large_view').prepend('<img src="'this'" width="450px"/>');
will fail because it this
cannot be converted to a valid url and because there is a syntax error anyway
Now I am still puzzled as to why you are claiming that the code you provided "does not work" ... perhaps because your html and css are wrong ... I don’t know, you didn’t provide them. Here's an example I put together while recreating your script ....
var imagesHtml = '';
var index = 0;
var images =
["http://ejohn.org/apps/workshop/adv-talk/jquery_logo.png"
, "http://ricardofeliciano.me/wp-content/uploads/2013/04/drupal-and-jquery-logos.png"
, "http://4.bp.blogspot.com/-RTR5yn-b2C8/UaID0dWx-XI/AAAAAAAAGTc/487tXntHlJM/s1600/jQuery+And+Ajax.png"
, "http://jenniferperrin.com/blog/wp-content/uploads/2012/10/jquery-logo.png"];
$(function(){
$.each(images, function(index,value){
imagesHtml += '<label class="align"><img class="thumbnail" src="'+value+'" /></label>';
});
$('.gallery').append(imagesHtml);
$('.large_view img').attr('src',images[index]);
$('.next').click(function(){
index = (index==images.length-1)?0:(index+1);
$('.large_view img').attr('src',images[index]);
});
$('.previous').click(function(){
index = (index===0)?(images.length-1):(index-1);
$('.large_view img').attr('src',images[index]);
});
});
.large_view{
display:inline-block;
width:90%;
}
.large_view img{
width:99%;
}
.gallery{
max-width:600px;
margin:20px auto;
}
.thumbs{
text-align:center;
}
.thumbnail{
width:24%;
}
.next,.previous{
font-weight:bold;
vertical-align:top;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="gallery">
<a class="previous"><<</a>
<div class="large_view">
<img/>
</div>
<a class="next">>></a>
<div class="thumbs">
</div>
</div>
source to share
Let's say you are an array images
you can use Array.prototype.indexOf ()
var images = ["http://i.imgur.com/iekpSfC.gif","http://i.imgur.com/a01mhfU.gif","http://i.imgur.com/WLIq7iK.gif","http://i.imgur.com/YbJIX8K.gif","http://i.imgur.com/Ctn6hrr.gif"],
figure = document.querySelector("figure");
images.forEach( function (element) {
var image = new Image(150,80);
image.src = element;
figure.appendChild(image)
});
//getting the image index
$("figure img").click( function () {
var imageIndex = $(this).attr("src");
alert(images.indexOf(imageIndex));// indexOf will return the index in the array
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<figure></figure>
source to share