如何在jQuery中使用$（this）選擇器附加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

您需要附加到$(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);
});

Answer 2

已經檢查了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);
    })

Answer 3

變更自

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