Как добавить div с помощью селектора $ (this) в jquery?

У меня есть два тега div, которые создаются динамически во время выполнения. Имя этого класса тегов - MainFolder

<div class="MainFolder" style="padding-left: 20px; width: 200px; height: 23px;">
    <span class="glyphicon glyphicon-folder-close folder-icon"></span>Folder1<br>
</div>
<div class="MainFolder" style="padding-left: 20px; width: 200px; height: 23px;">
    <span class="glyphicon glyphicon-folder-close folder-icon"></span>Folder2<br>
</div>

Функция щелчка в JQuery

$(document).on('click', '.MainFolder', function () {

    $('<div id="outer">Outer Div Content<div id="inner">Inner Div Content</div></div>').appendTo($(this).parent());
    //$('<div id="outer">Outer Div Content<div id="inner">Inner Div Content</div></div>').appendTo($(this));
    //$(this).appendTo('<div id="outer">Outer Div Content<div id="inner">Inner Div Content</div></div>');
});

Я хочу создать тег div под выбранным элементом.

Я пытаюсь сделать элемент div под одним из тегов div, где пользователь щелкнул

Если я попробую этот код ниже. Он создается в обеих папках. Но когда я использую $ (this), он не работает

$('<div id="outer">Outer Div Content<div id="inner">Inner Div Content</div></div>').appendTo('.MainFolder');

Пожалуйста, укажите свою актуальную проблему, с которой вы столкнулись.

gurvinder372 11.04.2018 12:57

@ gurvinder372 Я хочу создать тег div внутри одного тега div (.MainFolder), в котором пользователь щелкнул

kevin Peter 11.04.2018 13:00

Тогда просто добавьте к this. Нет необходимости в parent()

Rory McCrossan 11.04.2018 13:01
0
3
39
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

проверили на jsfiddle. оно работает.

   $('body').on('click', '.MainFolder', function(){
        var html = '<div id="outer">Outer Div Content<div id="inner">'+
        'Inner Div Content</div></div>';
        var self = $(this);
      self.parent().append(html);
    })

Меняться от

$('<div id="outer">Outer Div Content<div id="inner">Inner Div Content</div></div>').appendTo($(this).parent());

к

$('<div id="outer">Outer Div Content<div id="inner">Inner Div Content</div></div>').appendTo($(this));
Ответ принят как подходящий

Вам нужно добавить к $(this) вместо родительского элемента MainFolder, по которому щелкнули

  $('<div id="outer">Outer Div Content<div id="inner">Inner Div Content</div></div>').appendTo($(this));

Также удалите стиль height из MainFolder.

Демо

$(document).on('click', '.MainFolder', function() {

  $('<div id="outer">Outer Div Content<div id="inner">Inner Div Content</div></div>').appendTo($(this));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="MainFolder" style="padding-left: 20px; width: 200px;">
  <span class="glyphicon glyphicon-folder-close folder-icon"></span>Folder1<br>
</div>
<div class="MainFolder" style="padding-left: 20px; width: 200px;">
  <span class="glyphicon glyphicon-folder-close folder-icon"></span>Folder2<br>
</div>

Редактировать

Похоже, вы выполняете вызов ajax после щелчка, поэтому сохраните ссылку на $(this)

$(document).on('click', '.MainFolder', function() {
  var $self = $(this);
  $('<div id="outer">Outer Div Content<div id="inner">Inner Div Content</div></div>').appendTo($self);
});

Я удалил высоту из основной папки. Но все равно ничего не показывает

kevin Peter 11.04.2018 13:10

@kevinPeter Демка (опубликованная в моем посте) не сработала у вас?

gurvinder372 11.04.2018 13:11

он выдает эту ошибку в файле Jquery.js Uncaught TypeError: Cannot read property 'createDocumentFragment' of undefined

kevin Peter 11.04.2018 13:14

нет, это не работает. На самом деле я вызываю ajax, когда пользователь щелкает MainFolder. Если результат успешный, он должен создать div. Результат - успех. я получил предупреждающее сообщение

kevin Peter 11.04.2018 13:16

Поделитесь фактическим кодом, который вы пробовали на скрипке. В противном случае я не смогу понять, почему ваш код дает сбой.

gurvinder372 11.04.2018 13:17

Я получил предупреждение, он приносит запись с сервера. результат тоже успех

kevin Peter 11.04.2018 13:23

@kevinPeter Скорее всего, ваша проблема связана с тем, что this указывает на контекст функции ajax, а не на выбранный элемент. Вам нужно сохранить $ (this) на себя и добавить к себе

gurvinder372 11.04.2018 13:23

можешь мне сказать как?

kevin Peter 11.04.2018 13:24

Другие вопросы по теме