Я пытаюсь добавить какой-то контент в div, используя его имя класса. Событие должно произойти после того, как пользователь щелкнет элемент.
Моя структура такая:
<div class="wrap">
<div class="divOne">
<div class="divOneItem"><a class="myLink" href="#">CLICK TO APPEND</a></div>
</div>
<div class="divTwo">
<fieldset>
<legend>CONTENT TO APPEND:</legend>
</fieldset>
</div>
<div class="divOne">
<div class="divOneItem"><a class="myLink" href="#">CLICK TO APPEND</a></div>
</div>
<div class="divTwo">
<fieldset>
<legend>CONTENT TO APPEND:</legend>
</fieldset>
</div>
</div>
Каждую ссылку "нажмите, чтобы добавить" я хотел бы добавить только в соответствующий "divTwo" a "hello world"
Тег!
Этот код ниже добавляется в каждый div "divTwo"!
$(document).ready(function(){
$('.myLink').click(function() {
$(".wrap > .divTwo > fieldset").append( "<p>Test</p>" );
});
});
2 ответа
Решение 1
С вашим html вы можете сделать что-то вроде этого для быстрого решения:
$(document).ready(function(){
$('.myLink').click(function(evt) {
$(this).closest(".divOne").next().find("fieldset").append( "<p>Test</p>" );
});
});
На мой взгляд, это довольно некрасиво и порождает множество проблем. Если вы хоть немного измените структуру своего html, это почти гарантированно сломается.
closest(".divOne")
найдет ближайший узел (вверх по дереву) с классом .divOne
. next()
затем выберет ваш .divTwo
. Наконец, find("fieldset")
довольно очевидно.
Решение 2
Есть другой вариант, если вы готовы добавить в свой HTML две мелочи. Я добавил data-target
к вашим ссылкам на добавление и дал каждому набору полей идентификатор. Это даст вам некоторую гибкость при обновлении HTML в будущем. Набор полей более напрямую привязан к ссылке добавления, а не зависит от структуры HTML.
<div class="wrap">
<div class="divOne">
<div class="divOneItem">
<a class="myLink" href="#" data-target="#fieldset1">CLICK TO APPEND</a>
</div>
</div>
<div class="divTwo">
<fieldset id="fieldset1">
<legend>CONTENT TO APPEND:</legend>
</fieldset>
</div>
<div class="divOne">
<div class="divOneItem">
<a class="myLink" href="#" data-target="#fieldset2">CLICK TO APPEND</a>
</div>
</div>
<div class="divTwo">
<fieldset id="fieldset2">
<legend>CONTENT TO APPEND:</legend>
</fieldset>
</div>
</div>
Тогда вы можете сделать что-то вроде этого:
$(document).ready(function(){
$('.myLink').click(function(evt) {
const $target = $(evt.target)
const fieldset = $target.data("target")
$(fieldset).append( "<p>Test</p>" );
});
});
Пытаться:
$(document).ready(function(){
$('.myLink').click(function() {
$(this).parent().next(".divTwo").find("fieldset").append( "<p>Test</p>" );
});
});
Похожие вопросы
Новые вопросы
jquery
jQuery - это библиотека JavaScript, рассмотрите возможность добавления тега JavaScript. jQuery - это популярная кросс-браузерная библиотека JavaScript, которая облегчает прохождение Document Object Model (DOM), обработку событий, анимацию и взаимодействие AJAX, сводя к минимуму расхождения между браузерами. Вопрос с тегом jQuery должен быть связан с jQuery, поэтому jQuery должен использоваться в рассматриваемом коде, и в вопросе должны быть как минимум элементы, связанные с использованием jQuery.