Question

我有以下HTML：

<tr class='spark'>
<td>Hello</td>
<div class="hidden" data-target="1"></div>
</tr>

<tr class='spark'>
<td>World</td>
<div class="hidden" data-target="2"></div>
</tr>

我们假设这会打印一个表格，其中“Hello”和“World”为行。

使用jQuery，我想选择“隐藏”div并获取data-target属性。我试过这个：

$('.spark').click(function()
{
    var item = $('.hidden').attr('data-target');

    alert(item);

    //alert($('.spark').find('.hidden').tagName);

});

然而，即使点击的第一个是“1”而第二个是“2”，这也给我相同的结果。

有没有人对如何解决这个问题有任何想法？

Answer 1

您的HTML无效tr无法div

<tr class='spark'>
    <td>Hello <div class="hidden" data-target="1"></div></td>
</tr>

然后使用后代查找

$('.spark').click(function () {
    var item = $('.hidden', this).attr('data-target');
    alert(item);
});

＆＃13;

$('.spark').click(function() {
  var item = $('.hidden', this).attr('data-target');
  alert(item);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
  <tr class='spark'>
    <td>Hello
      <div class="hidden" data-target="1"></div>
    </td>
  </tr>
  <tr class='spark'>
    <td>World
      <div class="hidden" data-target="2"></div>
    </td>
  </tr>
</table>

＆＃13;

Answer 2

只有td和th元素可以用作tr元素的直接子元素。你需要在td中包装div元素first.something like：

<tr class='spark'>
 <td>Hello</td>
 <td><div class="hidden" data-target="1"></div></td>
</tr>

然后你可以使用当前点击的元素上下文和.find()来定位点击的tr中的元素：

$('.spark').click(function(){
  var item = $(this).find('.hidden').attr('data-target');
  alert(item);
});

Jquery - 选择“”标签内的元素

2 个答案:

Working Demo