jQuery: 查找元素

Question

我有一个小问题。我有一段代码看起来像这样：

<table>.........
    <td>
        <span class="editable" id="name"><?= $name ?></span>
        <img class="edit_field" src="icons/edit.png"/>
    </td>
....... 
</table>

我想获取 span 的 id，这样我就可以改变它（例如在其中添加一个输入框）。

我有以下代码：

$('.edit_field').live('click', function() {
    var td = $(this).parent();
    var span = td.find(".editable");
    alert(span.id)
});

但它并不起作用...有什么想法吗？（我尝试这样做是为了可以重复使用）

- luqita

---

除非您需要父对象，否则您可以通过执行var span = $(this).siblings(".editable")来缩短代码。另外，请考虑使用.on替换.live，因为.live已被弃用。 - MrOBrian

你的代码应该能够正常工作，无论它是否有效（我怀疑你有重复的ID，但这不应该破坏上面的代码）。 - Kevin B

Answer 1

不要使用已被弃用的 live()，而是使用 jQuery 1.7+ 中的 .on() 来进行委托事件处理。请注意保留 HTML 标签。

$('table tbody').on('click', '.edit_field', function() {
    var img = $(this) ;
    var td = img.parent();   // parent td ( if needed )
    var span = img.prev('span');  // previous span ( a jQuery object )
    alert( span.attr('id') ); // or span[0].id,here span[0] will gives an element
});

如果您的.edit_field不是动态生成的，则使用以下方法：

$('.edit_field').on('click', function() {
    var img = $(this) ;
    var td = img.parent();   // parent td ( if needed 
    var span = img.prev('span');  // previous span ( a jQuery object )
    alert( span.attr('id') ); // or span[0].id,here span[0] will gives an element
});

注意

不要为多个元素使用相同的id。我假设你在每一行上都有一个span，并且它们都具有id=name。如果是这样，请改用class而不是id。

- thecodeparadox

Answer 2

try this http://jsfiddle.net/VPvSD/

$('table').on('click', '.edit_field', function() {
    var td = $(this).parent();
    var span = $(this).prev('span');
    alert(span.attr("id"));
});

- Vinit

---

谢谢！第一行不需要（我的意思是 var td = $(this).parent()） - luqita

对于没有经验的人士，请注意："在表格内始终使用<tr>，最好使用<tbody>"。 - Roko C. Buljan

Answer 3

试试这个：

  $('.edit_field').bind('click', function() {
   var td_id = $(this).parents('td').attr('id');
   alert(td_id);
  });

最好使用ID而不是类：

  $('#name').bind('click', function() {
   var td_id = $(this).parents('td').attr('id');
   alert(td_id);
  });

如果您需要在其中添加一些HTML内容，则可以这样做：

  $('.edit_field').bind('click', function() {
   var added_html = "<input type='text' />";
   var td_id = $(this).parents('td').attr('id');
   $('#'+td_id).html(added_html);
   alert(td_id);
  });

对于这种情况，最好使用bind或on，而不是live。

- hsuk