Question

我有以下JQuery代码：

$.fn.slider = function () {

  $(this).each(function () {

    var $this = $(this);

    var $items = $this.find("div.poster");
    console.log($items.length);  
    $items.first().addClass("active");
    console.log($items.find(".active").length);  

  });
}

这是一个插件Slider，我按如下方式应用：

$("div.posters").slider();

我得到以下输出：

$items.length = 2
$items.find(".active").length = 0

这怎么可能？我错过了什么？

更新

我按要求发布HTML代码：

<div class="posters">    
  <div class="poster">
    Poster 1
  </div>
  <div class="poster">
    Poster 2
  </div>
</div>

Answer 1

更改$this的{{1}}：

$(this)

Answer 2

从文档中 - 给定一个表示一组DOM元素的jQuery对象，.first（）方法构造一个new jQuery object from the first element in that set。

你可以尝试这样：

$(this).each(function () {

  var $this = $(this);

  var $items = $this.find("div.poster");
  console.log($items.length);  
  $items.first().addClass("active");
  console.log($items.filter(".active").length);  
  console.log($this.children(".active").length);
});

Answer 3

据我所知DOCS，find无法找到应用于应用了find的元素本身的类，但是它的后代中存在的类元件。

描述：获取当前匹配元素集中每个元素的后代，由选择器，jQuery对象过滤，或者元件。

所以，如果你想使用find，那么请通过它的父母：

$(this).each(function () {

  var $this = $(this);

  var $items = $this.find("div.poster");
  console.log($items.length);  
  var temp = $items.first();
  temp.addClass("active");
  console.log(temp.parents(".posters").find(".active").length);  // Will give 1
});

Answer 4

我找到了一种解决方案，我认为这是最好的方法：

$items.filter(".active").length

按CSS类查找元素

4 个答案: