jQuery 选择器：如何选择外部 div？答案

【问题标题】：jQuery selector: How do I select the outer div?jQuery 选择器：如何选择外部 div？
【发布时间】：2011-01-24 00:36:12
【问题描述】：

我有这个 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”之后添加一个文本区域。

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

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

【问题讨论】：

标签： jquery jquery-selectors css-selectors

【解决方案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>');
  }
)

【讨论】：

【解决方案2】：

要么：

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

或

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

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

使用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() 的用途。 :)

【讨论】：

【解决方案5】：

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

【讨论】：

【解决方案6】：

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

不会工作，但是

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

会起作用的！

注意使用了复数词：父母。

【讨论】：