Javascript-форум - Как получить index изображения?

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - Как получить index изображения? (https://javascript.ru/forum/jquery/35452-kak-poluchit-index-izobrazheniya.html)

jeysmook

11.02.2013 12:38

Как получить 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>

tsigel

11.02.2013 13:21

<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-й и второй соответственно.

jeysmook

11.02.2013 13:50

tsigel,
а что не возможно получить индексы a.img, как бы считать только эти ссылки? И тем более если src="as.jpg", src="1233.jpg", src="32323sd.jpg", src="asdasdad223.jpg"

tsigel

11.02.2013 13:56

Я вижу 2 простых выхода:
1) После загрузки документа пройтись по всем картинкам/(ссылкам с картинками) и расставить им индексы например в name и далее работать с name как с индексом.
2) При каждом нажатии пробегаться по документу и пересчитывать картинки, пока не дойдете до текущей.

tsigel

11.02.2013 14:01

Более красивый выход - создать объект с картинкой, тогда индекс картинки можно писать сразу в её свойства.

tsigel

11.02.2013 14:13

<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>

danik.js

11.02.2013 14:30

tsigel, кто вас научил модифицировать прототипы встроенных объектов?

tsigel

11.02.2013 14:33

danik.js,
Никто не учил. Я осваиваю скрипт 3-й месяц по учебнику с этого сайта.

А что, я что-то не так написал?

danik.js

11.02.2013 14:42

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>

tsigel

11.02.2013 14:46

Ну объектный подход же всегда лучше, вопрос только в выборе имени переменной/объекта, или я не прав?

Назови я объект, скажем, "Img" или "aImg" вопросов бы не было?

danik.js

11.02.2013 14:56

Упс. А слона то я и не приметил...
Image - встроенный объект, а вы его перезаписываете.
Хотя если объявлять его не как глобальный, то вполне можно пользоваться.
В любом случае, не нужно писать конструкторы на каждый чих. Объектный подход хорош, но в меру :)

jeysmook

11.02.2013 23:05

danik.js,
Спасибо все отлично применил, но вот еще один вопрос не по теме. Почему вы пользуетесь e.preventDefault();. И в чем отличие между e.preventDefault(); и return false;

рони	11.02.2013 23:30

Цитата:

Сообщение от jeysmook

ТО есть выдает index элемента в div а не в общем body.

Так и вычисляйте индекс в общем массиве данных элементов.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
  <title></title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(function(){
       $('.img').click(function(e){
              alert($('.img').index(this)+1);
              e.preventDefault();
       });
});
});
</script>
</head>
<body>
<div class="text">
    <div>
        Тут какой то текст!Тут какой то текст!Тут какой то текст!Тут какой то текст!Тут какой то текст!Тут какой то текст!
        <a href="" class="img"><img src="http://javascript.ru/forum/images/smilies/victory.gif" /></a>
    </div>
    <div>
        Тут какой то текст!Тут какой то текст!Тут какой то текст!Тут какой то текст!Тут какой то текст!Тут какой то текст!    Тут какой то текст!Тут какой то текст!Тут какой то текст!Тут какой то текст!Тут какой то текст!Тут какой то текст!
        <a href="" class="img"><img src="http://javascript.ru/forum/images/smilies/victory.gif" /></a>
        <a href="" class="img"><img src="http://javascript.ru/forum/images/smilies/victory.gif" /></a>
    </div>
</div>

</body>
</html>

jeysmook

12.02.2013 11:29

рони,
Спасибо)

danik.js

12.02.2013 11:33

Да, что-то я намудрил ))

Цитата:

Сообщение от jeysmook

Почему вы пользуетесь e.preventDefault();. И в чем отличие между e.preventDefault(); и return false;

В jQuery если не ошибаюсь оба варианта работают. preventDefault нагляднее. Плюс в addEventListener обработчиках нужно использовать именно его.

tsigel

12.02.2013 12:33

Цитата:

Сообщение от рони

$('.img')

Это будет медленно работать. Встречая такой код браузер пробегает по всему документу в поиске указанного селектора, при длине документа строк в 500 эта операция занимает порядка 100 мс (цифра зависит от компьютера пользователя) (для сравнения обращение к переменной занимает 1-2 мс).

Если эта операция будет выполняться на сайте пару раз, то ок, а если это частая операция, то имеет смысл записать их в массив и работать с номером в массиве.

danik.js

12.02.2013 12:44

Цитата:

Сообщение от tsigel

для сравнения обращение к переменной занимает 1-2 мс

Чиво?? Цифры явно завышены на несколько порядков :))
Вообще, резонно сохранять результат выборки.
Итого:

$(document).ready(function () {
    var $img = $('.img');
    $img.click(function(e){
          alert($img.index(this)+1);
          e.preventDefault();
    });
});

tsigel

12.02.2013 12:56

Это цифры при работе в ИЕ 7-8 ;)

рони	12.02.2013 13:16

:write: Если уж оптимизировать то невычислять каждый раз индекс а сделать это один раз.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
  <title></title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(function(){
      $('.img').each(function (index) {
        $(this).click(function (e) {
            alert(index+1);
            e.preventDefault();
        });
        });
        });
</script>
</head>
<body>
<div class="text">
    <div>
        Тут какой то текст!Тут какой то текст!Тут какой то текст!Тут какой то текст!Тут какой то текст!Тут какой то текст!
        <a href="" class="img"><img src="http://javascript.ru/forum/images/smilies/victory.gif" /></a>
    </div>
    <div>
        Тут какой то текст!Тут какой то текст!Тут какой то текст!Тут какой то текст!Тут какой то текст!Тут какой то текст!    Тут какой то текст!Тут какой то текст!Тут какой то текст!Тут какой то текст!Тут какой то текст!Тут какой то текст!
        <a href="" class="img"><img src="http://javascript.ru/forum/images/smilies/victory.gif" /></a>
        <a href="" class="img"><img src="http://javascript.ru/forum/images/smilies/victory.gif" /></a>
    </div>
</div>

</body>
</html

danik.js

12.02.2013 13:27

рони, только инкремент убери.

Hekumok

12.02.2013 13:30

рони, ваш код неправильно работает! Если нажимать несколько раз на изображение, то index будет увеличиваться ( т.к. alert(++index)) и число будет уже другое, т.е. "неправильное"

рони	12.02.2013 13:34

поправил код

Цитата:

Сообщение от Hekumok

alert(++index)

рони	12.02.2013 13:53

итого )))

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
  <title></title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(function(){
      $('.img').each(function (index) {
        $(this).click(function (i) {
        return function (e)
{
    alert(i);
    e.preventDefault();
}

        }(index+1));
        });
        });
</script>
</head>
<body>
<div class="text">
    <div>
        Тут какой то текст!Тут какой то текст!Тут какой то текст!Тут какой то текст!Тут какой то текст!Тут какой то текст!
        <a href="" class="img"><img src="http://javascript.ru/forum/images/smilies/victory.gif" /></a>
    </div>
    <div>
        Тут какой то текст!Тут какой то текст!Тут какой то текст!Тут какой то текст!Тут какой то текст!Тут какой то текст!    Тут какой то текст!Тут какой то текст!Тут какой то текст!Тут какой то текст!Тут какой то текст!Тут какой то текст!
        <a href="" class="img"><img src="http://javascript.ru/forum/images/smilies/victory.gif" /></a>
        <a href="" class="img"><img src="http://javascript.ru/forum/images/smilies/victory.gif" /></a>
    </div>
</div>

</body>
</html>

Deff	12.02.2013 14:38

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
  <title></title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(function(){
      $('img').click(function () {
           alert($('img').index(this))
      });
});
</script>
</head>
<body>
<div class="text">

        Тут какой то текст!Тут какой то текст!Тут какой то текст!Тут какой то текст!Тут какой то текст!Тут какой то текст!
        <a href="" class="img"><img src="http://javascript.ru/forum/images/smilies/victory.gif" /></a>
 
    <div>
        Тут какой то текст!Тут какой то текст!Тут какой то текст!Тут какой то текст!Тут какой то текст!Тут какой то текст!    Тут какой то текст!Тут какой то текст!Тут какой то текст!Тут какой то текст!Тут какой то текст!Тут какой то текст!
        <a href="" class="img"><img src="http://javascript.ru/forum/images/smilies/victory.gif" /></a>
        <a href="" class="img"><img src="http://javascript.ru/forum/images/smilies/victory.gif" /></a>
    </div>
</div>

</body>
</html>

рони	12.02.2013 14:41

Deff,
??? и где это работает?

Deff	12.02.2013 14:45

рони,
:) Не читал топик...

рони	12.02.2013 14:47

Deff,
в 13 сообщении ваш вариант уже был, сейчас уже битва за производительность )))

Deff	12.02.2013 14:50

рони,
:) Кнешн создать массив заранее, но при возможности подгружаемых изо, к примеру Аяксом или в слайдерах - тоже не Айс, нужны точные начальные условия работы со страницей

jeysmook

17.02.2013 14:39

Deff,
рони,
Я понял, что лучше всего использовать массив, так?

danik.js

17.02.2013 14:58

Я голосую за код из 17-го поста ;)

Часовой пояс GMT +3, время: 00:31.