Question

我有两个图像（.field-img），包装在一个容器（.group-container）中，

每个图像都在唯一的字段ID中，因此我的tpl被分解为

<div class=group-container>
 <div id=field1>
  <div class=field-img>
 </div></div>
 <div id=field2>
  <div class=field-img>
 </div></div>
</div>

我的js是

$(".group-container .field-img").click(function() {
 alert(".group-container .field-img");

我想要的是自动检测图像是属于field1还是field2。

所以我可以提醒（“。group-container .field1 / 2 .field-img”）;

我该怎么做？

感谢您的帮助

Answer 1

$(".group-container .field-img").click(function() {
   var field=$(this).parent().attr('id');
});

Answer 2

Izzey解决方案的另一种选择是使用.closest，其属性以selector（或classname）开头，因为这样的div更适合具有公共类

$(".group-container .field-img").click(function() {
    var field = $(this).closest("[id^=field]")[0].id;
});

或使用通用的类名

HTML

<div class=group-container>
 <div class="field" id=field1>
  <div class=field-img>
 </div></div>
 <div class="field" id=field2>
  <div class=field-img>
 </div></div>
</div>

JS

$(".group-container .field-img").click(function() {
    var field = $(this).closest(".field")[0].id;
});

Answer 3

$(".group-container .field-img").click(function() {
   var field = this.parentNode.id;
   alert (".group-container ." + field + " .field-img");
});

Answer 4

$(".group-container .field-img").each(function() {
        $(this).click(function(){   
          var fieldid=$(this).parent().attr('id');
        });
});

Answer 5

由于一个元素在另一个元素内部，因此无论如何都会向上传播，因此您可以始终将点击绑定到父元素并执行：

$('div[id^="field"]').on('click', function() {
    alert(".group-container "+this.id+" .field-img");
});

FIDDLE

甚至动态地获取它们：

$('div[id^="field"]').on('click', function(e) {
    alert('.'+this.parentNode.className+" "+this.id+" ."+e.target.className);
});

FIDDLE

如何在jquery中选择项目类？

5 个答案: