Получить идентификатор DOM элемента

Question

Похоже, что это должен быть кусок пирога, но ни Google, ни веб-сайт jQuery не помогли.

Я хочу получить DOM ID изображения внутри структуры.

Структура сложная: я использую что-то вроде примера контейнера, найденного на сайте jQuery . Разница в том, что у меня есть несколько контейнеров, и у каждого есть свое изображение.

После того, как изображение было помещено внутрь контейнера, я хочу изменить способ отображения всех изображений внутри него. Поскольку я хотел сослаться на все изображения внутри контейнера, я подумал об использовании их номера DOM (они находятся между image-of-container-j и image-of-container-j + 1), но я не знаю, каким образом чтобы получить идентификатор изображения контейнера. Использование .index () в jquery будет ссылаться на позицию относительно его родителя. Так как каждое изображение находится внутри или что-то, я всегда получаю 1 с этим методом. Любая идея / обходной путь? : -)

Код: http://jsfiddle.net/xKpTH/2/

По сути, у меня есть ингредиенты и кухонные инструменты, которые действуют как мусорная корзина в примере с сайтом jQuery. У них есть скрытая форма, которую я отправляю с помощью ajax при нажатии определенной кнопки.

здесь для общего вида и анимации, тогда как скрытое, содержащееся в каждом ингредиенте, будет отправлено вместе с формой. Вот структура HTML для одного ингредиента:

<li class="ui-widget-content ui-corner-tr">
  <h5 class="ui-widget-header">Meat</h5> 
  <img src="images/meat.jpg"
            alt="A chunk of meat" width="96" height="72" /> 
  <a
            href="images/meat.jpg" title="View larger image"
            class="ui-icon ui-icon-zoomin">View larger</a> 
  <input type="text"
           class="ingrediente hidden" name="ingredient" value="Meat" />
</li>

Вот структура html для одной корзины:

<div id="trash3" class="trash ui-widget-content ui-state-default">
   <h4 class="ui-widget-header">
       <span>Padella</span>
       <img src="images/fryingpan.jpg" alt="A frying pan"
            width="96" height="72" />
   </h4>
   <form class="hidden internalForm" name="FryingPan" method="post" action="phasehandler.php">
        </form>
   <button id="dialogbutton1" class="create-user sendButton">Send trash3</button>
</div>

Когда нажата ("#dialogbutton"), появляется диалоговое окно с использованием jquery. Это код:

    $("[id *= dialog ]").button().click(function() {
    $(".internalList").addClass("hidden");
    $(this).addClass("hidden");
    $(".internalForm").removeClass("hidden");
    $(".internalForm").children().removeClass("hidden");
    $babbo = $(this).parent();
    $babbo.appendTo("#dialog-form");
    $index = $("h4 img").index();
    $("#dialog-form").dialog("open");
});

Я хочу отобразить изображение ингредиента рядом с текстом. Мне нужно знать, какие там ингредиенты, поэтому я подумал об использовании массива document.image [], потому что я обнаружил, что если изображение сковороды - скажем - 7, а следующий мусорный контейнер - 10, изображение ингредиентов, содержащихся в сковороде под номерами 8 и 9. Я не мог найти другой способ найти их, используя селекторы jQuery и использование .index () не помогает, потому что он возвращает индекс относительно родительского контейнера, а не DOM :-(

Answer 1

Если вы хотите получить атрибут id, вы можете попробовать использовать .attr('id'), но помните, что этот метод будет возвращать идентификатор только для первого соответствующего элемента в селекторе.

РЕДАКТИРОВАТЬ: Если вы хотите манипулировать всем набором, вы можете пойти с ответом scunliffe;)

Надеюсь, это поможет.

Answer 2

Я думаю, что вы пытаетесь решить проблему, которой у вас пока нет.

Если все ваши изображения находятся в каком-либо контейнере (например, в DIV), вы можете использовать jQuery для доступа к ним и манипулировать ими в соответствии с содержанием вашего сердца.

//set of all images inside container
$('#myContainer').find('img');

//want to style them all the same way? try adding a class to them
$('#myContainer').find('img').addClass('in_container');

//iterate over the set
$('#myContainer').find('img').each(function(index){
  $(this).data('special', 'My current index is: ' + index);//store some data
});

//etc.