获取元素的DOM id

时间:2011-08-21 13:51:08

标签: jquery dom

它似乎应该是小菜一碟,但谷歌或jQuery的网站都没有帮助。

我想获取结构内图像的DOM ID。

结构很复杂:我使用jQuery's website中的容器示例。不同的是,我有几个容器,每个容器都有自己的图像。

将图像放入容器内后,我想操纵所有图像在其中显示的方式。由于我想引用容器内的所有图像,我想过使用它们的DOM编号(它们位于容器-j的图像和容器的图像-j + 1之间),但我不知道任何方式获取容器图像的id。使用jquery的.index()将引用相对于其父级的位置。因为每个图像都在一个或者某个东西里面,所以我总是用这个方法得到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的索引:-(

  • 2 个答案:

    答案 0 :(得分: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.
    

    答案 1 :(得分:2)

    如果你想获得id属性,你可以试试.attr('id'),但请记住,这个方法只会返回选择器中第一个匹配元素的id。

    编辑:如果您想要操作整个套装,您可以使用scunliffe的答案;)

    希望它有所帮助。