获取元素的 DOM id

发布于 2024-11-30 16:04:33 字数 2107 浏览 1 评论 0原文

看起来这应该是小菜一碟，但 Google 或 jQuery 的网站都没有帮助。

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

结构很复杂：我使用的内容类似于 jQuery 网站。不同之处在于我有几个容器，每个容器都有自己的镜像。

将图像放入容器后，我想操纵所有图像在容器内显示的方式。由于我想引用容器内的所有图像，因此我考虑使用它们的 DOM 编号（它们位于 image-of-container-j 和 image-of-container-j+1 之间），但我不知道有什么办法获取容器镜像的 id。使用 jquery 的 .index() 将引用相对于其父级的位置。由于每个图像都在 a 或某物内，因此我总是用该方法得到 1 。有什么想法/解决方法吗？ :-)

代码： http://jsfiddle.net/xKpTH/2/

基本上，我有配料和厨房用具的作用就像 jQuery 站点示例中的垃圾桶。当按下某个按钮时，他们有一个我用ajax发送的隐藏表单。此处

用于总体外观和动画，而每种成分中包含的隐藏内容将随表格一起发送。以下是一种成分的 html 结构：


  肉 
   
  查看大图 
  <输入类型=“文本”
           class="ingrediente hide" name="ingredient" value="肉" />

这是一个垃圾箱的 html 结构：


   
       帕德拉
       
   
   
        
   <按钮 id="dialogbutton1" class="create-user sendButton">发送垃圾箱3

当按下（“#dialogbutton”）时，会使用 jquery 弹出一个对话框。这是代码：

 $("[id *= 对话框]").button().click(function() {
    $(".internalList").addClass("隐藏");
    $(this).addClass("隐藏");
    $(".internalForm").removeClass("隐藏");
    $(".internalForm").children().removeClass("隐藏");
    $babbo = $(this).parent();
    $babbo.appendTo("#dialog-form");
    $index = $("h4 img").index();
    $("#dialog-form").dialog("打开");
});

我想要的是在文本旁边显示成分图像。我需要知道那里的成分是什么，所以我考虑使用 document.image[] 数组，因为我发现如果煎锅的图像是 - 比如说 - 7 并且下一个垃圾桶是 10，那么包含成分的图像在煎锅中的位置是数字 8 和 9。我找不到另一种方法来使用 jQuery 的选择器来定位它们，并且使用 .index() 没有帮助，因为它返回相对于父容器而不是 DOM 的索引:-(

原文

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

暖伴 2024-12-07 16:04:33

我认为你正在尝试解决一个你还没有遇到的问题。

如果您的所有图像都位于某种容器（例如 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.

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.

回复收藏 0 原文