Как получить index изображения?
Как получить index изображения, например вот так, но почему-то index иногда выдает не верное число, почему? ТО есть выдает index элемента в div а не в общем body.
<script type="text/javascript">
$(function(){
$('.img').click(function(){
alert($(this).index()+1);
return false;
});
});
</script>
<div class="text">
<div>
Тут какой то текст!Тут какой то текст!Тут какой то текст!Тут какой то текст!Тут какой то текст!Тут какой то текст!
<a href="" class="img"><img src="1.jpg" /></a>
</div>
<div>
Тут какой то текст!Тут какой то текст!Тут какой то текст!Тут какой то текст!Тут какой то текст!Тут какой то текст! Тут какой то текст!Тут какой то текст!Тут какой то текст!Тут какой то текст!Тут какой то текст!Тут какой то текст!
<a href="" class="img"><img src="2.jpg" /></a>
<a href="" class="img"><img src="3.jpg" /></a>
</div>
</div>
|
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<div class="text">
<div>
Тут какой то текст!Тут какой то текст!Тут какой то текст!Тут какой то текст!Тут какой то текст!Тут какой то текст!
<a href="" class="img"><img src="1.jpg" /></a>
</div>
<div>
Тут какой то текст!Тут какой то текст!Тут какой то текст!Тут какой то текст!Тут какой то текст!Тут какой то текст! Тут какой то текст!Тут какой то текст!Тут какой то текст!Тут какой то текст!Тут какой то текст!Тут какой то текст!
<a href="" class="img"><img src="2.jpg" /></a>
<a href="" class="img"><img src="3.jpg" /></a>
</div>
</div>
<script type="text/javascript">
$(function(){
$('img').click(function(){
alert(parseInt($(this).attr('src')));
return false;
});
});
</script>
jQuery объект - это массив, добавив к нему index в данном случае вы получаете номер элемента. Во втором диве $('img').lenght = 2 вот вы и получаете 1-й и второй соответственно. |
tsigel,
а что не возможно получить индексы a.img, как бы считать только эти ссылки? И тем более если src="as.jpg", src="1233.jpg", src="32323sd.jpg", src="asdasdad223.jpg" |
Я вижу 2 простых выхода:
1) После загрузки документа пройтись по всем картинкам/(ссылкам с картинками) и расставить им индексы например в name и далее работать с name как с индексом. 2) При каждом нажатии пробегаться по документу и пересчитывать картинки, пока не дойдете до текущей. |
Более красивый выход - создать объект с картинкой, тогда индекс картинки можно писать сразу в её свойства.
|
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<div class="text">
<div>
Тут какой то текст!Тут какой то текст!Тут какой то текст!Тут какой то текст!Тут какой то текст!Тут какой то текст!
<a href="" class="img"><img src="1.jpg" /></a>
</div>
<div>
Тут какой то текст!Тут какой то текст!Тут какой то текст!Тут какой то текст!Тут какой то текст!Тут какой то текст! Тут какой то текст!Тут какой то текст!Тут какой то текст!Тут какой то текст!Тут какой то текст!Тут какой то текст!
<a href="" class="img"><img src="2.jpg" /></a>
<a href="" class="img"><img src="3.jpg" /></a>
</div>
</div>
<script type="text/javascript">
var Image = function ($dom, index) {
this.$ = $dom;
this.$.data('image', this);
this.index = index;
this.init();
};
Image.prototype.init = function () {
this.$.click(this.handlers.click);
};
Image.prototype.handlers = {
click: function() {
var image = $(this).data('image');
alert(image.index);
return false;
}
};
$(function(){
var index = 0;
$('.img').each(function() {
var image = new Image($(this), index)
index++;
})
});
</script>
|
tsigel, кто вас научил модифицировать прототипы встроенных объектов?
|
danik.js,
Никто не учил. Я осваиваю скрипт 3-й месяц по учебнику с этого сайта. А что, я что-то не так написал? |
tsigel, не стоит изменять прототипы встроенных объектов. По крайней мере не подавайте плохой пример другим.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<div class="text">
<div>
Тут какой то текст!Тут какой то текст!Тут какой то текст!Тут какой то текст!Тут какой то текст!Тут какой то текст!
<a href="" class="img"><img src="1.jpg" /></a>
</div>
<div>
Тут какой то текст!Тут какой то текст!Тут какой то текст!Тут какой то текст!Тут какой то текст!Тут какой то текст! Тут какой то текст!Тут какой то текст!Тут какой то текст!Тут какой то текст!Тут какой то текст!Тут какой то текст!
<a href="" class="img"><img src="2.jpg" /></a>
<a href="" class="img"><img src="3.jpg" /></a>
</div>
</div>
<script>
var $images = $('.img');
var images = $images.toArray();
$images.click(function(e){
var index = images.indexOf(this);
alert(index);
e.preventDefault();
});
</script>
|
Ну объектный подход же всегда лучше, вопрос только в выборе имени переменной/объекта, или я не прав?
Назови я объект, скажем, "Img" или "aImg" вопросов бы не было? |
| Часовой пояс GMT +3, время: 14:28. |