通过遍历jquery中的html元素获取IMG标记

How can I get the id value of the img tag using jquery? Once one of the divs with class containing polo.

如何使用jquery获取img标记的id值?曾经有一个包含polo类的div。

this = line with **

这=与**一致

<div style="width: 240px" class="outer">
   <img id="polo" class="apparelimage" src="images/Nike Polo - Navy.jpg" height="200px" width="200px" alt="" style="border: 1px solid black; cursor: pointer;">
   <br>
   <label style="font-size: small;"><b>COLORS</b></label>
   <div style="width: 280px; display: flex;">
      <div class="polo-black apparelimage" style="width: 30px; height: 30px; background-color: black; margin-right: 5px;"></div>
      <div class="polo-gray apparelimage" style="width: 30px; height: 30px; background-color: gray; margin-right: 5px;"></div>
      <div class="polo-lightblue apparelimage" style="width: 30px; height: 30px; background-color: lightblue; margin-right: 5px;"></div>
      <div class="polo-navy apparelimage" style="width: 30px; height: 30px; background-color: navy; margin-right: 5px;"></div>
      <div class="polo-white apparelimage" style="width: 30px; height: 30px; background-color: white; margin-right: 5px;"></div>
   </div>
</div>

Once one of the divs is clicked I want to traverse up through the elements and get the first elemwnt with and img tag. Then I want to alert the id of the img element.

一旦点击其中一个div,我想遍历元素并获得第一个elemwnt和img标签。然后我想提醒img元素的id。

$('.apparelimage').click(function () {
    var id = this.id;

        if (id == "") {
            id = alert($(this).closest('.outer').find("img").id);
        }
});

3 个解决方案

#1

The problem is that the <img> element is not a direct ancestor of the clicked <div> elements. But if you can add a class to the outermost div. you can then use .closest() to find it, and then use .find() to search back down.

问题是通过遍历jquery中的html元素获取IMG标记元素不是单击的

元素的直接祖先。但是如果你可以在最外层的div中添加一个类。然后,您可以使用.closest()来查找它,然后使用.find()进行搜索。

<div class="apparelContainer" style="width: 240px">
   <img ...

Then you can use:

然后你可以使用:

$('.apparelimage').click(function () {
    var id = this.id;

    if (id == "") {
        alert($(this).closest('.apparelContainer').find('img.apparelimage').html());
    }
});

NOTE: The OP has changed the code in the question to reflect what is shown above.

注意:OP已更改问题中的代码以反映上面显示的内容。

Regarding the second issue, you need to get the id property from the DOM element, but you have a jQuery object.

关于第二个问题,您需要从DOM元素获取id属性,但是您有一个jQuery对象。

Use either:

$(this).closest('.outer').find("img").attr('id')

Or:

$(this).closest('.outer').find("img")[0].id

jsfiddle

#2

try this .. this for divs id starts with polo

试试这个..这对于divs id以polo开头

$('[class^="polo"]').on('click',function(){
    $(this).parent().parent().find('img').attr('id');
});

if you want id containing polo

如果你想要包含polo的id

$('[class*="polo"]').on('click',function(){.....});

DEMO HERE

#3

Instead of parent().find, try closest("img") to traverse up.

而不是parent()。find,尝试最接近(“img”)来遍历。

#1