具有相同类的每个元素的Jquery长度答案

【问题标题】：Jquery lenght of each element with same class具有相同类的每个元素的Jquery长度
【发布时间】：2015-09-30 02:15:55
【问题描述】：

我有不同数量的“news-list-view-2-cols”类的div。它们包含不同数量的具有“文章”类的 div。我想说如果“div class news-list-view-2-cols”中的“div class article”的数量大于或等于2，那么将addClass“article-last”添加到父元素中的最后两个div。

我在努力

if ($( ".news-list-view-2-cols .article" ).length >= 2) { 
    $( ".news-list-view-2-cols .article").slice(-2).addClass("article-last");
}

这适用于 html 代码中的最后一个“news-list-view-2-cols”，但不适用于前一个。所以我必须找到一个解决方案，让我知道每个 (.news-list-view-2-cols .article) 长度的数量。我尝试了，但没有成功。

活生生的例子：

if ($( ".news-list-view-2-cols .article" ).length >= 2) { 
    $( ".news-list-view-2-cols .article").slice(-2).addClass("article-last");
}

/*
$( ".news-list-view-2-cols .article" ).each(function() {
    if ( this.length >= 2 ) {
        this.slice(-2).addClass("article-last")
	}
});
*/

.news-list-view-2-cols {
    border-bottom: 1px solid #CCC;
}
.article-last {
    color: red
}

<div class="news">
	<div class="news-list-view-2-cols cf">
		<div class="article articletype-0">1</div>
		<div class="article articletype-0">2</div>
	</div>
</div>

<div class="news">
	<div class="news-list-view-2-cols cf">
		<div class="article articletype-0">1</div>
		<div class="article articletype-0">2</div>
		<div class="article articletype-0">3</div>
		<div class="article articletype-0">4</div>
	</div>
</div>

<div class="news">
	<div class="news-list-view-2-cols cf">
		<div class="article articletype-0">1</div>
		<div class="article articletype-0">2</div>
		<div class="article articletype-0">3</div>
		<div class="article articletype-0">4</div>
	</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

Fiddle

【问题讨论】：

请注意，我将您的小提琴内容移入您的问题（作为堆栈片段）。问题必须是可以回答的，而不涉及站外内容（即使它在 jsFiddle 上）。 HTML 结构在这里很重要，因此需要在问题中。

标签： jquery

【解决方案1】：

您只需要对文章集进行切片，而不是对整个集进行切片：

$( ".news-list-view-2-cols").each(function() {
    var articles = $(this).find(".article");
    if (articles.length >= 2) { 
        articles.slice(-2).addClass("article-last");
    }
});

实例：

$(".news-list-view-2-cols").each(function() {
  var articles = $(this).find(".article");
  if (articles.length >= 2) {
    articles.slice(-2).addClass("article-last");
  }
});

.news-list-view-2-cols {
  border-bottom: 1px solid #CCC;
}
.article-last {
  color: red
}

<div class="news">
  <div class="news-list-view-2-cols cf">
    <div class="article articletype-0">1</div>
    <div class="article articletype-0">2</div>
  </div>
</div>

<div class="news">
  <div class="news-list-view-2-cols cf">
    <div class="article articletype-0">1</div>
    <div class="article articletype-0">2</div>
    <div class="article articletype-0">3</div>
    <div class="article articletype-0">4</div>
  </div>
</div>

<div class="news">
  <div class="news-list-view-2-cols cf">
    <div class="article articletype-0">1</div>
    <div class="article articletype-0">2</div>
    <div class="article articletype-0">3</div>
    <div class="article articletype-0">4</div>
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

【讨论】：