1

我想删除一些通过 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 为目标，也不会删除第三个元素。

4

2 回答 2

1

调整选择器

将 jQuery 选择器修改为：

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

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

在引入更多 s 时之前的选择器失败后对此进行了调整<div>（参见示例 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>s，

$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'); 
    } 
}
于 2013-10-17T11:53:38.140 回答
0 
var num = $('.col-OuterContainer').length;

这将为您提供整个文档中div带有 class 的 s的数量。col-OuterContainer

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

这个选择器只计算节点div的直接子#level1节点。

您是否.col-OuterContainer在页面的其他地方有，或者嵌套在#level1节点的更深处？

于 2013-10-17T12:06:11.810 回答