Question

我正在尝试检查元素是否存在于作为父元素的另一个元素中，如果不存在，则使用以下方法在父元素的子元素之后插入HTML：

jQuery(document).ready(function($){
    jQuery('.1').each(function($){
        if(jQuery(this).find('.intruder').length == 0){
            jQuery('.1b').after('<div class="pull-left item-image"><div class="specialthumbnail-nopicture"></div></div>');
        }
    });
});

所需的HTML结果：

<div class="1">
        <div class="1a">Something else</div>
        <div class="1b">Something else</div>
        <div class="intruder">HTML goes here</div>
        <div class="1c">Something else</div>
</div>

我得到的是，当intruder类已经存在于DOM中时，我得到两个intruder元素：

 <div class="1">
            <div class="1a">Something else</div>
            <div class="1b">Something else</div>
            <div class="intruder">HTML goes here</div>
            <div class="intruder">HTML goes here</div>
            <div class="1c">Something else</div>
    </div>

所以基本上它没有认识到元素已经存在，并且它正在插入一个新元素，从而导致重复。

修改

通过改变来解决它：

jQuery('.1b').after

到

jQuery(this).find('.1b').after

请告诉我这种方法是否可以接受..

Answer 1

您希望为子项执行上下文查找，而不是全局查找，因此您不会影响其他子元素。

＆＃13;

jQuery(document).ready(function($) {
  $('.1').each(function() {
    //target the intruder inside this '1'
    if ($('.intruder', this).length == 0) {
      //target the 1b inside this '1'
      $('.1b', this).after('<div class="pull-left item-image"><div class="specialthumbnail-nopicture">Weee</div></div>');
    }
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="1">
  <div class="1a">Something else</div>
  <div class="1b">Something else</div>
  <div class="intruder">HTML goes here</div>
  <div class="1c">Something else</div>
</div>
<hr>
<div class="1">
  <div class="1a">Something else</div>
  <div class="1b">Something else</div>
  <div class="1c">Something else</div>
</div>

＆＃13;

jQuery .find（）和.after（）无法正常工作

1 个答案: