Я пытаюсь добавить какой-то контент в 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>" );
    });
}); 
0
Russel Riehle 1 Янв 2018 в 01:13

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>" );
  });
});
0
Derek Hopper 31 Дек 2017 в 22:32

Пытаться:

$(document).ready(function(){
  $('.myLink').click(function() {
     $(this).parent().next(".divTwo").find("fieldset").append( "<p>Test</p>" );
  });
}); 
0
jeprubio 31 Дек 2017 в 22:26