Obtain DOM id of an element

Question

It seems like it should be a piece of cake but neither Google or jQuery's website were helpful.

I want to obtain the DOM ID of an image inside a structure.

The structure is complex: I am using something like the example of a container found in jQuery's website. The difference is that I have got several containers and each one has got its own image.

After an image has been dropped inside the container, I want to manipulate the way all images are shown inside it. Since I wanted to refer to all images inside of a container, I thought about using their DOM number (they are between image-of-container-j and image-of-container-j+1), but I do not know any way to get the id of the container images. Using jquery's .index() will refer to the position relative to its parent. Since every image is inside a or something, I always get 1 with that method. Any idea/workaround? :-)

Code: http://jsfiddle.net/xKpTH/2/

Basically, I have got ingredients and kitchen instruments who act like the trashbin in the jQuery's site example. They have got an hidden form I send with ajax when a certain button is pressed. The

is here for the general look and animation, while the hidden contained in every ingredient will be sent with the form. Here is the html structure for one ingredient:

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

Here is the html structure for one trashbin:

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

When a ("#dialogbutton") is pressed, a dialog pops up using jquery. This is the code:

    $("[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");
});

What I want is to display the ingredient image next to the text. I need to know what are the ingredients there so I thought about using the document.image[] array, because I found out that if the frying pan's image is - say - 7 and the next trashbin is 10, the image of the ingredients contained in the frying pan are at number 8 and 9. I could not find another way to locate them by using jQuery's selectors and using .index() does not help because it returns the index relative to the parent container and not the DOM :-(

Upvotes: 2

Views: 1991

Answer 1

I think you are trying to solve a problem you don't have yet.

If all of your images are in a container of some kind (e.g. a DIV) you can use jQuery to access them and manipulate them to your hearts content.

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

Answer 2

If you want to get the id attribute you can try with .attr('id') but remember that this method will only return the id for the first matched element in the selector.

EDIT: If that you want is manipulate the entire set you can go with the answer of scunliffe ;)

Hope it helps.