jQuery选择器

Question

我有这个HTML代码：

<div class='com_box'>
  <div class='com_box_c'>
    <div class='com_box_info'>
      <a id='quote'>quote</a>
    </div>
  </div>
</div>

当我点击＃quote时，我想在'.com_box'之后添加一个textarea。

如何选择外部div？到目前为止，这是我没有工作的尝试：

$('a#quote').click(
  function() {
    var com_box = $(this).parent('div.com_box');
    com_box.after('<textarea>....</textarea>');
  }
)

Answer 1

使用 .closest()

替换

var com_box = $(this).parent('div.com_box');

与

var com_box = $(this).closest('div.com_box');


$('#quote').click(
  function() {
    $(this).closest('div.com_box').after('<textarea>....</textarea>');
  }
)

Answer 2

我认为$(this).parent('div.com_box')不会返回任何结果，因为parent只返回直接父母。你可能只想要$('div.com_box')（或$(this).closest('div.com_box')）。

Answer 3

使用closest()，.com_box不是#quote元素的直接父级：

$('a#quote').click(function() {
    var com_box = $(this).closest('div.com_box');
    com_box.after('<textarea>....</textarea>');
});

使用$(this).parent().parent().parent()也可以，但这就是closest()的用途。 ：）

Answer 4

或者：

var com_box = $(this).closest("div.com_box");

或

var com_box = $(this).parents("div.com_box:first");

Answer 5

$('#quote').bind('click' function() {
  $(this).parent().parent().parent().prepend('<textarea></textarea>');
});

Answer 6

var com_box = $(this).parent('div.com_box');

无效，但

var com_box = $(this).parents('div.com_box');

会奏效！

注意使用复数词：parent。