javascript - 在 JS 中按类获取父项中的项目数

Question

我建立了一个图片库，其中有一个主图片和最多 5 个缩略图。并且可以使用左右按钮循环浏览缩略图并替换主图像，如下所示:

$(".gallery-btn-left").unbind("click").bind("click", function(){
    var image_id = $(".gallery-main-image img").attr('data-id');
    image_id--;
    if(image_id == 0){image_id = $('.gallery-thumbnail img').length;}
    var image_url = $(".gallery-thumbnail img[data-id=" + image_id + "]").attr('src');
    $(".gallery-main-image img").attr('src', image_url);
    $(".gallery-main-image img").attr('data-id', image_id);
});
$(".gallery-btn-right").unbind("click").bind("click", function(){
    var image_id = $(".gallery-main-image img").attr('data-id');
    image_id++;
    if(image_id > $('.gallery-thumbnail img').length){image_id = 1;}
    var image_url = $(".gallery-thumbnail img[data-id=" + image_id + "]").attr('src');
    $(".gallery-main-image img").attr('src', image_url);
    $(".gallery-main-image img").attr('data-id', image_id);
});

这一切都很好，但是，如果我想将两个画廊放在同一个页面上，我会遇到一个问题，即我的 JS 得到的是 10 而不是 5 或然而，$('.gallery-thumbnail img').length 可能会有缩略图(每个画廊最多 5 个)，这是预期的。

我想知道的是，是否有一种方法可以获取父图库中缩略图的长度，而不是整个页面上有多少缩略图。

Answer 1

多实例最常见的方法是查找容器实例，然后在该实例中使用 find()。

此外，当您多次查找同一个选择器时，最好存储对它的引用，而不是每次需要访问它时都搜索 DOM。它还使代码更易于阅读

类似于:

$(".gallery-btn-left").unbind("click").bind("click", function() {
  var $gallery = $(this).closest('.MAIN-GALLERY-CLASSNAME'),
      $mainImg = $gallery.find(".gallery-main-image img"),
      $thumbs = $gallery.find('.gallery-thumbnail img'),        
      image_id = $mainImg.attr('data-id');

  image_id--;
  if (image_id == 0) {
    image_id = $thumbs.length;
  }
  var image_url = $thumbs.filter("[data-id=" + image_id + "]").attr('src');
  $mainImg.attr({'src': image_url, 'data-id',image_id});

});