Javascript 如何使用JQuery删除第4个div标记并用自己的内容替换它？

所以我使用了一个广告拦截器，它可以检测用户是否在网络浏览器上打开了广告拦截器。如果检测到广告拦截器，那么我想删除第4个.owl项目类，并用我自己的代码替换它。 因此，目前我正在使用：

$(".single-gallery div.owl-wrapper div.owl-item:eq(3)").remove();

并将其替换为

$(".single-gallery div.owl-wrapper div.owl-item:eq(3)").append("<div class='panel-display'><div class='panel_content'>We noticed that you are using an ad blocker.</div></div>");

$（“.single gallery div.owl-wrapper div.owl-item:eq（3）”）.append（“我们注意到您正在使用广告拦截器”）；

Html代码是：

    <div class="owl-wrapper">
      <div class="owl-item">Item 1</div>
      <div class="owl-item">Item 2</div>
      <div class="owl-item">Item 3</div>
      <div class="owl-item">Item 4</div> //Remove this item
      <div class="owl-item">Item 5</div>
    </div>

项目1
项目2
项目3
第4项//删除此项
项目5

我希望最终结果如下：

    <div class="owl-wrapper">
      <div class="owl-item">Item 1</div>
      <div class="owl-item">Item 2</div>
      <div class="owl-item">Item 3</div>
      <div class="panel-display">
       <div class="panel_content">
         We noticed that you are using an ad blocker.
       </div>
      </div>
      <div class="owl-item">Item 5</div>
    </div>

项目1
项目2
项目3
我们注意到您正在使用广告拦截器。
项目5

我正在使用的当前代码给了我意想不到的结果。出于某种原因，我必须刷新浏览器才能更改代码。我不确定我做的是否正确。在这个问题上，我已经头痛了一段时间了。我相信有更好的方法来处理这个问题

我的完整代码如下，以供参考

jQuery(document).ready( function($) {
    $('.icon.icon-arrow-right').one("click", function(){
        function adBlockDetected() {
          $(".single-gallery div.owl-wrapper div.owl-item:eq(3)").remove();           
           $(".single-gallery div.owl-wrapper div.owl-item:eq(3)").append("<div class='panel-display'><div class='panel_content'>We noticed that you are using an ad blocker</div></div>");
        }
        function adBlockNotDetected() {


        }

        if(typeof blockAdBlock === 'undefined') {
          adBlockDetected();
        } else {
          blockAdBlock.setOption({ debug: true });
          blockAdBlock.onDetected(adBlockDetected).onNotDetected(adBlockNotDetected);
        }

        function checkAgain() {
          $('#block-adb-enabled').hide();
          $('#block-adb-not-enabled').hide();
          // setTimeout 300ms for the recheck is visible when you click on the button
          setTimeout(function() {
            if(typeof blockAdBlock === 'undefined') {
              adBlockDetected();
            } else {
              blockAdBlock.onDetected(adBlockDetected).onNotDetected(adBlockNotDetected);
              blockAdBlock.check();
            }
          }, 300);
        }
    });
  });    

jQuery（文档）.ready（函数（$）{
$（'.icon.icon向右箭头'）.one（“单击”，函数（）{
函数adBlockDetected（）{
$（“.single gallery div.owl-wrapper div.owl-item:eq（3）”）.remove（）；
$（“.single gallery div.owl-wrapper div.owl-item:eq（3）”）.append（“我们注意到您正在使用广告拦截器”）；
}
函数adBlockNotDetected（）{
}
如果（blockAdBlock的类型=='undefined'）{
adBlockDetected（）；
}否则{
setOption（{debug:true}）；
blockAdBlock.onDetected（adBlockDetected）。onNotDetected（adBlockNotDetected）；
}
函数checkreach（）{
$（“#已启用块adb”）.hide（）；
$（“#未启用块adb”）.hide（）；
//单击按钮时，可以看到重新检查的setTimeout 300ms
setTimeout（函数（）{
如果（blockAdBlock的类型=='undefined'）{
adBlockDetected（）；
}否则{
blockAdBlock.onDetected（adBlockDetected）。onNotDetected（adBlockNotDetected）；
blockAdBlock.check（）；
}
}, 300);
}
});
});    

如何使用JQuery删除第四个div标记并用自己的内容替换它

有趣的是，您使用（不是

删除

然后

追加

）：

$（“.single gallery div.owl-wrapper div.owl-item:eq（3）”）.replacetwith（“我们注意到您正在使用广告拦截器”）；
// -----------------------------------------------------^

例如：

$（“#btn”）。单击（函数（）{
$（“.single gallery div.owl-wrapper div.owl-item:eq（3）”）.replaceWith（“我们注意到您正在使用广告拦截器”）；
});

项目1
项目2
项目3
项目4（待替换）
项目5

如何使用JQuery删除第四个div标记并用自己的内容替换它

有趣的是，您使用（不是
删除
然后
追加
）：

$（“.single gallery div.owl-wrapper div.owl-item:eq（3）”）.replacetwith（“我们注意到您正在使用广告拦截器”）；
// -----------------------------------------------------^

例如：


$（“#btn”）。单击（函数（）{
$（“.single gallery div.owl-wrapper div.owl-item:eq（3）”）.replaceWith（“我们注意到您正在使用广告拦截器”）；
});

项目1
项目2
项目3
项目4（待替换）
项目5
在
$（文档）中使用
replaceWith（）
。ready
函数

在
$（文档）中使用
replaceWith（）
。ready
函数

很好的解决方案。Thanks@Mariton：不用担心。如果这回答了您的问题，即堆栈溢出的工作方式，您可以通过单击旁边的复选标记来“接受”答案。很好的解决方案。Thanks@Mariton：不用担心。如果这回答了您的问题，即堆栈溢出的工作方式，您可以通过单击旁边的复选标记来“接受”答案。
$(".single-gallery div.owl-wrapper div.owl-item:eq(3)").replaceWith("<div class='panel-display'><div class='panel_content'>We noticed that you are using an ad blocker.</div></div>");
// -----------------------------------------------------^