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

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

您可以使用过滤器尝试此操作

$('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" />');   
    });
});

演示。

Answer 3

* + selector 仅选择元素前面的元素

:gt(0) 选择不是第一个的所有元素

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

Answer 4

尝试这个

 $('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 5

这应该工作

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