jQuery：appendTo 最接近的语法答案

【问题标题】：jQuery: appendTo closest syntaxjQuery：appendTo 最接近的语法
【发布时间】：2014-04-07 19:00:46
【问题描述】：

我确信这是一个简单的问题。我在这样的表中有几行：

   <tr>
    <td>
      <select class="UsersSelect">
        <option value="user-whatever">User Whatever</option>
      </select>
    </td>
    <td>
      <a class="EditButton"><span class="ui-icon ui-icon-pencil"></span></a>
    </td>
   </tr>

这里是 jQuery：

$('.EditButton').click(function() {
   $('<option>test</option>').appendTo($(this).closest('select.UsersSelect'));
...
});

这根本没有结果。我相信我的错误在于不正确地使用 $(this) 但无法弄清楚我是如何搞砸的。

希望我的目标足够明显。只是为了澄清一下，我试图仅附加到最接近的选择，它一次永远不会超过一个，并且总是在正上方。

非常感谢您的宝贵时间！

【问题讨论】：

标签： jquery syntax closest appendto

【解决方案1】：

由于select 不是同级或父级，您必须对选择器执行更多逻辑：

var container = $(this).closest("td").prev("td").find("select.UsersSelect");
$('<option>test</option>').appendTo(container);

【讨论】：

所有直接答案在技术上都是正确的。但是因为这是第一个，所以我选择了它。对于未来的读者：我不知道最近的（）是由父母或兄弟姐妹旅行的。我以为是逐行写的，这不是真的。
@Joe -- 是的，closest 向上移动，find 向下移动
所以这意味着它从开口然后向下/向内移动到您指定的任何位置。好人。谢谢！

【解决方案2】：

select.UsersSelect 不是.EditButton 的父级。这就是为什么什么都没有发生的原因。

改用这个：

$('.EditButton').click(function() {
   $(this)
     .closest("tr")
     .find("select.UsersSelect")
     .append('<option>test</option>');
   // ...
   return false;
});

JSFIDDLE

【讨论】：

【解决方案3】：

试试：

$('.EditButton').click(function() {
   $('<option>test</option>').appendTo($(this).closest('td').prev().find('select.UsersSelect'));
});

jsFiddle example

.closest() 沿 DOM 向上传播，在您的示例中，它将到达父 td，然后是父 tr，即表，完全没有选择。

【讨论】：

【解决方案4】：

改变这个：

$('<option>test</option>').appendTo($(this).closest('select.UsersSelect'));

到这里：

$('<option>test</option>').appendTo($(this).closest('tr').find('select.UsersSelect'));

您需要使用.closest() 遍历到tr，然后您可以使用.find() 方法获取目标。

【讨论】：