Поиск правильного селектора для: добавить div к родителю в jquery - PullRequest
Новая
       7

Поиск правильного селектора для: добавить div к родителю в jquery

0 голосов
/ 08 декабря 2018

У меня есть html структура: 

<div class="dropdownedit">
<div class="dropbtn">textxyz</div>
<div class="dropdown-content" style="display: none;">
<div href="#" class="ocond" id="text1">text1</div>
<div href="#" class="ocond" id="text2">text2</div>
<div href="#" class="ocond" id="text3">text3</div>
<div href="#" class="ocond" id="text4">text4</div>
</div></div>

Теперь я хотел бы добавить новую строку div <div href="#" class="ocond" id="text0">text0</div>

в класс dropdown-content.Это должно быть сделано ВНУТРИ события щелчка ($("#table_cards").on( 'click', 'div.ocond', function (e) {...) класса "ocond" (внутри класса dropdown-content).

Я пробовал эти два варианта: 

$(this).closest('.dropdown-content').prepend('<div ... >text0</div>');

и 

$(this).parent('.dropdown-content').prepend('<div ... >text0</div>');

, но оба не работают. Я не могу найти правильный селектор, чтобы сделать это, нажимая на «второй» класс.Заранее благодарю за любую помощь!

1 Ответ

0 голосов
/ 08 декабря 2018

.parent() не принимает селекторы, потому что он просто поднимается на один уровень.

.parents() делает, потому что он продолжает проходить через родителей, бабушек и дедушек и т. Д. И влияет только на те элементы, которые соответствуютселектор.

.closest() принимает селектор так же, как .parents(), но остановится после нахождения первого родителя, который встретит селектор.

Вы можете использовать .parent().prepend() или .closest(".dropdown-content").prepend()

$(".dropbtn").click( function() { 
  $(this).nextAll(".dropdown-content").first().show();
});

$(".dropdownedit").mouseleave( function() { 
  $(this).find(".dropdown-content").hide();
});

$(".ocond").click( function() { 
  $(this).closest('.dropdown-content').prepend("<div href='#' class='ocond' id='text0'>text0</div>");
  $(this).closest('.dropdown-content').hide(); 
});
.dropdown-content {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="dropdownedit">
  <div class="dropbtn">textxyz</div>
  <div class="dropdown-content">
    <div href="#" class="ocond" id="text1">text1</div>
    <div href="#" class="ocond" id="text2">text2</div>
    <div href="#" class="ocond" id="text3">text3</div>
    <div href="#" class="ocond" id="text4">text4</div>
  </div>
</div>
...