jquery - クラスの 1 つのインスタンスから子要素の数を取得する

Question

tumblr ブログをカスタマイズしています。フォトセットに含まれる写真の数に応じて、特定のスタイルとルールを適用したいと考えています。各投稿に同じクラスがある場合、各投稿に存在する子要素の数を取得する方法がわかりません。これが tumblr によって生成される種類のコードである場合:

<div class="photoset">
     <img />
     <img />
</div>

<div class="photoset">
     <img />
     <img />
     <img />
</div>

jQuery に最初と 2 番目のインスタンス (つまり 2 と 3) の要素数を返すようにするにはどうすればよいですか?

使用$('.photoset img').length();してみましたが、存在するすべての要素の合計数 (この場合は 5) が得られます。

どんな助けでも大歓迎です！

乾杯、スコット

Answer 1

各フォトセット アイテムを循環し、その画像を個別にカウントしてから、コードのその時点でその情報を使用して必要なことを行うことができます。

$(".photoset").each(function(index, elem) {
    var numImages = $(this).find("img").length;
    // do whatever processing you wanted to with numImages here
});

これらのカウントを配列に入れたい場合は、次のようにすることができます。

var imgCountArray = $(".photoset").map(function() {
    return($(this).find("img").length)
}).get();

Answer 2

以下を試してください、

var imgCounts = [];

$('.photoset').each (function () {
  imgCounts.push($(this).find('img').length);
});

今、

imgCounts[0] = 2 //first divs img count
imgCounts[1] = 3 //second divs img count

Answer 3

あなたが使用することができます：

$(".photoset").each(function(i, photoset) {
  photoset = $(photoset); 
  var numImages = photoset.children().length;
  // or var numImages = photoset.find("img").length; for only images

  if (numImages === 2) {
    // your code
  }
  if (numImages === 3) {
    // your code
  }

  // or just comparing whether greater or lower
  if (numImages > 2) {
    // your code
  }
});

Answer 4

これにはいくつかの方法があります。

.each()まず、各を循環させるために使用できます.photoset:

$('.photoset').each( function() {
   var num = $(this).find('img').length;
   // Do something based on num
});

または、 または を使用.eq()し:eq()て特定のものを選択します。

var num = $('.photoset:eq(1) img').length;

var num = $('.photoset').eq(1).find('img').length;

Answer 5

$('.photoset:first img').length

と

$('.photoset:last img').length