javascript - 如何在 Jquery 中使用 $(this) 选择器 append div？

Question

我有两个在运行时动态创建的 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');

Answer 1

您需要 append 到 $(this) 而不是单击的 MainFolder 的父元素

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

此外，从 MainFolder 中删除 height 样式

演示

$(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);
});