Question

当我运行此代码时，我得到原始HTML作为输出。我希望与其他两次一样的文字。如果我将类名“ grid-item”更改为其他名称，则根本不会显示第二个插入内容。如何进行这种精确的代码切割？

<div>
  <div class="grid-item">
    1
  </div>
  <div class="grid-item">
    2
  </div>
</div> 

<div>
  <div class="grid-item">
    1
  </div>
  <div class="grid-item">
    2
  </div>
</div>

$(document).ready(function(){

    $(".grid-item:nth-child(1)").after(Element);
  $(".grid-item:nth-child(1)")[1].after(Element);
  
});
            
var Element = '<div class="grid-item"> problem text </div>';

输出：


1
problem text
2
1
<div class="grid-item"> problem text </div>
problem text
2

Answer 1

这似乎是您正在寻找的代码

$(document).ready(function(){

  $(".grid-item:nth-child(1)").after(Element);
  $(".grid-item:nth-child(1)").eq(1).after(Element);
  
});
            
var Element = '<div class="grid-item"> problem text </div>';

有[1]-根据您的评论，它应该如上所述.eq(1)。

Answer 2

将[1]更改为.eq(1)。

在为jQuery集合下标时，它将返回相应的DOM元素，而不是jQuery对象。 jQuery和DOM元素都具有.after()方法，但是它们的工作方式不同。 jQuery方法会将字符串解释为HTML，而DOM方法将其视为应按字面显示的文本。

$(document).ready(function() {

  $(".grid-item:nth-child(1)").after(Element);
  $(".grid-item:nth-child(1)").eq(1).after(Element);

});

var Element = '<div class="grid-item"> problem text </div>';

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <div class="grid-item">
    1
  </div>
  <div class="grid-item">
    2
  </div>
</div>

<div>
  <div class="grid-item">
    1
  </div>
  <div class="grid-item">
    2
  </div>
</div>

显示原始html而不是解释

2 个答案: