Question

我需要在内容中包含一个div，只有它是最后一个孩子。我对此代码的问题是，如果只有一个项目，它将执行。所以我想知道我应该如何检查使用：last-child只有当有一个孩子时才有。如果只有一个孩子。我不想添加div。这是我的代码：

$('div[class^="columns-"]').each(function(){
   $(this).find('div[class^="column"]:last-child').each(function(i){
       $(this).wrapInner('<div class="col-last" />');   
   });
});

Answer 1

如果它是唯一的孩子，那么它也是第一个，所以你可以这样做：

$('div[class^="columns-"]').each(function(){
   $(this).find('div[class^="column"]:last-child:not(:first-child)').each(function(i){
       $(this).wrapInner('<div class="col-last" />');   
   });
});

通过这种方式，您可以拥有多组列，但仍然只能获得包含多个列的集合中的最后一个子集，即如果您有：

<div class="row-1">
  <div class="columns-1"></div>
</div>
<div class="row-2">
  <div class="columns-1"></div>
  <div class="columns-2"></div>
  <div class="columns-3"></div>
</div>
<div class="row-3">
  <div class="columns-1"></div>
</div>

选择器只会影响.row-2 .columns-3

Answer 2

您可以使用filter

尝试此操作

$('div[class^="columns-"]').each(function(){
    $(this).find('div[class^="column"]:last-child')
    .filter(function(){ return $(this).parent().children().length > 1; )
    .each(function(i){
        $(this).wrapInner('<div class="col-last" />');   
    });
});

DEMO.

Answer 3

试试这个

 $('div[class^="columns-"]').each(function(){
     if((this).children().length>1)
       $(this).
           find('div[class^="column"]:last-child').
           each(function(i){
               $(this).wrapInner('<div class="col-last" />');   
           });
 });

children().length这将给出子元素的数量

Answer 4

这应该有效

$('div[class^="columns-"]').each(function() {
    var children = $(this).find('div[class^="column"]');
    if(children.length > 1) {
        children.last().wrapInner('<div class="col-last" />');   
    };
});

Answer 5

* + selector selects only elements preceded by an element

:gt(0) selects all elements that are not first

http://api.jquery.com/category/selectors/

选择最后一个孩子，并确保它不是唯一的孩子？

5 个答案: