jQuery-无法添加具有特定类名的div

Question

我一直在绞尽脑汁试图找出为什么这不起作用。

基本上，我在页面上有同一个模型的多个实例。但我只想插入一个空的 div在这些实例之间有一个类。我已经尝试过append , appendTo , prepend , prependTo , before , after ，...基本上有很多，但没有一个按预期工作，我不知道为什么。这是示例代码

<div class="wrapper class1">
  <div class="element_body">
  Stuff here 
  </div>
</div>
<div class="wrapper class2">
  <div class="element_body">
  Stuff here 
  </div>
</div>
.....

我尝试插入<div class="div-for-labels"></div>之间wrapper和element_body 。

但是 它只适用于第一个实例。此后的任何其他实例都不起作用。它要么删除了 class1 ，只保留wrapper类，并且不插入 <div class="div-for-labels"></div>完全没有。

但是 如果我改变<div class="div-for-labels"></div>至<div class=".div-for-labels"></div>

然后一切正常!

这对我来说完全没有任何意义。

为什么一个有效，而另一个无效？ 为什么它从父 div 中删除该类？ 为什么它在第一个实例中工作正常，但在所有其他实例中都失败？

我尝试了很多不同的方法 _this是我要定位的特定实例，我不会同时插入所有实例。我一一插入。

$(_this).prepend('<div class="div-for-labels"></div>');

append 也是如此, after等

或者 var $labelDiv = $(''); `$(_this).prepend($labelDiv);

它们都不起作用。请帮忙! :(

------编辑

好的，非常感谢你们的帮助。这是非常直接的事情，它不会与我在同一页面上命名其他 div 的方式一起工作(我认为)。我只需重命名用于新 div 的类即可解决该问题。

<div class="my-panel my-tabs" data-id="firstID">

      <div class="my-panel-body">

        <div class="my-panel--single" data-index="0">

            <div class="my-panel__label active">

                <span>Test 1</span>

            </div>

            <div class="my-panel__content active" data-index="0">
                 Here is the content
            </div>

       </div>

       <div class="my-panel--single" data-index="1">

            <div class="my-panel__label">

                <span>Test 1</span>

            </div>

            <div class="my-panel__content" data-index="1">
                 Here is the content
            </div>

       </div>

       //Many other block of `my-panel--single`

     </div>

 </div>

这是我的问题的步骤

• 我有很多 my-panel 的实例在页面上(每个都有一个唯一的数据 ID)，对于每个实例，我想附加 <div class="my-panel-labels"></div>在 my-panel 之间和my-panel-body 。

• 但是由于一些奇怪的原因，当我尝试这样做时，my-tabs与 my-panel 一起上课div 将被删除，并且新的 div 也不会被附加。

• 但是如果我将类名更改为任何其他名称，它就会起作用(解释了为什么当我将 ( . ) 添加到类名时它就会起作用。

我能够通过更改类名称来解决这个问题，但仍然不知道为什么该特定名称不起作用。因此，如果你们中有人知道其中的原因，那对我那点 jQuery 知识来说将是一个巨大的启发。

再次非常感谢你们的帮助。

Answer 1

你到底想做什么？我已经包含了您在此演示中提到的每个方法。

演示

$('.DL').append(`<div class="DIV1">[DIV1]Method: .append()][Loc: after DD7</div>`);

$(`<div class="DIV2">[DIV2]Method: .appendTo()][Loc: after DIV1</div>`).appendTo('.DL');

$('.DL').prepend(`<div class="DIV3">[DIV3]Method: .prepend()][Loc: before DTA</div>`);

$(`<div class="DIV4">[DIV4]Method: .prependTo()][Loc: before DIV3</div>`).prependTo('.DL');

$('.DL').after(`<div class="DIV5">[DIV5]Method: .after()][Loc: behind DL</div>`);

$('.DL').before(`<div class="DIV6">[DIV6]Method: .before()][Loc: in front of DL</div>`);

.DL {
  border: 2px dashed lime;
}

div:nth-of-type(odd) {
  color: red;
  border-bottom: 1px solid red
}

div:nth-of-type(even) {
  color: blue;
  border-bottom: 1px solid blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<h3>DL</h3>
<dl class='DL'>
  <dt class='DTA'>DTA</dt>
  <dd class='DD1'>DD1</dd>
  <dd class='DD2'>DD2</dd>
  <dd class='DD3'>DD3</dd>
  <dd class='DD4'>DD4</dd>

  <dt class='DTB'>DTB</dt>
  <dd class='DD5'>DD5</dd>
  <dd class='DD6'>DD6</dd>
  <dd class='DD7'>DD7</dd>
</dl>