jQuery：appendTo最接近的语法

Question

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

   <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）不正确，但无法弄清楚我是如何搞砸它的。

希望我的目标足够明显。只是为了澄清，我试图追加到最接近的选择，它一次不会超过一个，而且总是直接在上面。

非常感谢您的时间！

Answer 1

由于select不是兄弟姐妹或父母，你必须对选择器做更多的逻辑：

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

Answer 2

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

请改用：

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

JSFIDDLE

  

Answer 3

尝试：

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

<强> jsFiddle example

.closest()向上移动DOM，在你的例子中，它将转到父td，然后是父tr，即表，完全没有选择。

Answer 4

改变这个：

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

到此：

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

---

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