使用jQuery删除动态加载的内容

时间:2013-10-17 11:21:32

标签: javascript jquery wordpress

我想删除一些通过get_template_part();添加了wordpress循环的div元素。

结构是这样的:

<div id="level1" class="col-0-1 noPad">
    get_template_part('new-story');   
</div>

为了便于阅读,我已经删除了大部分循环。

模板部分的结构如下:

<div class="col-OuterContainer noPad">
  stuff
</div>

所以在实践中看起来更像是这样:

 <div id="level1" class="col-0-1 noPad">
    <div class="col-OuterContainer noPad">
      stuff
    </div>  
</div>

我想检测是否有超过2个名为“col-OuterContainer”的divz,然后删除之后的divz。我认为这很直接,并尝试了这个:

var num = $('.col-OuterContainer').length;
if (num > 2) {
   $('#level1>div:gt(1)').remove();
}

我目前有3个帖子,所以第三个应该被删除,但事实并非如此。我得到一个3的console.log,所以它显然知道有3个元素,那为什么不删除第三个元素?

更新:所以我在代码中玩了更多。

wp循环仍然相同:

 <div id="level1" class="col-0-1 noPad">
        get_template_part('new-story');   
    </div>

get_template_part中的代码是:

<div class="col-OuterContainer noPad"><div>stuff 1</div></div>

JS是这样的:

jQuery(document).ready(function($){ 
console.log( $('.col-OuterContainer').length );
$('#level1 .noPad:gt(1)').remove();     
});

我收到了这个输出:

<div id="level1" class="col-0-1 noPad">
<div class="col-OuterContainer noPad"><div>stuff 1</div></div>
<div class="col-OuterContainer noPad"><div>stuff 1</div></div>
<div class="col-OuterContainer noPad"><div>stuff 1</div></div>
</div>

控制台显示3个元素,但即使我定位noPad或.col-OuterContainer,也不会删除第三个元素。

2 个答案:

答案 0 :(得分:1)

调整后的选择器

将jQuery选择器修改为:

<script>
    $('#level1 .noPad:gt(1)').remove();
       //Or 
    $(document).find('#level1 .noPad:qt(1)').remove();
</script>

小提琴http://jsfiddle.net/K5Q3B/6/

在引入了更多<div>之后,在您之前的选择器失败后对此进行了调整(请参阅example Fiddle)。或者,您可以尝试此人在另一个SO Question中建议的内容:

<script>
   $('#level1 .noPad').slice(3).remove();
</script>

删除动态加载<div>

<script>
    $.ajax({
       .. //Other Opts
       success: function( data ) {
          $('#somediv').html( data );
          var NodesToRemove = $(document).find('#level1 > div:gt(1)'); 
          //Or $('#somediv').find('#level1 .noPad:qt(1)').remove(); 
          NodesToRemove.remove();
       });
    });
</script>

PHP中的预防:

正如提到的评论中的其他人一样,在PHP中防止这种情况要好得多 - 那么你根本不需要考虑任何JavaScript去除任何<div>

$Counter = 0;
if ( have_posts() ) {
    while ( have_posts() ) {
       $Counter++;
       the_post(); 
       if ( $Counter <= 2 )
           get_template_part('new-story'); 
    } 
} 

此外,您可以重写PHP以获得AJAX条件,

$Counter = 0;
$isAjax = ( isset( $_GET["ajax"] ) && $_GET["ajax"] == 'true' ? true : false );
if ( have_posts() ) {
    while ( have_posts() ) {
       $Counter++;
       the_post(); 
       if ( !$isAjax || ( $isAjax && $Counter <= 2 ))
           get_template_part('new-story'); 
    } 
} 

答案 1 :(得分:0)

var num = $('.col-OuterContainer').length;

这将为您提供整个文档中divcol-OuterContainer个{。}}的数量。

$('#level1>div:gt(1)') { ...

此选择器仅计算div节点的直接子节点#level1

您的页面上的其他位置是.col-OuterContainer,还是嵌套在#level1节点的更深处?