JQuery селектор: как выбрать внешний div?

Question

У меня есть этот HTML-код:

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

Когда я нажимаю # цитату, я хочу добавить текстовую область после '.com_box'.

Как выбрать внешний 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

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

Answer 3

Или:

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

или

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

Answer 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(). :)

Answer 5

Я не думаю, что $(this).parent('div.com_box') вернет какие-либо результаты, поскольку parent вернет только непосредственных родителей. Вы, вероятно, просто хотите $('div.com_box') для этого (или $(this).closest('div.com_box')).

Answer 6

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

не будет работать, но

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

будет работать!

Обратите внимание, используется множественное число: родители.