Jqueryはリストから特定のdivの幅を取得します

Question

jqueryを使用してdivの配列内のdivの幅を取得するのは苦労しています。通常、私は...正常に動作します

$("#divID").width() 

をこのような何かをしたいが、私はdiv要素のリストを、この時を反復処理する必要があり、これはエラーを返します「キャッチされない例外TypeError：$（... ）[0] .width 『は「ちょうど返す）の代わりに関数の属性として

$("#parentID .childClass")[0].width() 
$("#parentID .childClass")[1].width() 
etc... 

そして.width使用（』関数未定義ではありません。

私が間違っていることは何ですか？

EDIT - apologies - 元々は、.childClass識別子が省略されています。これは、jqueryの選択によってすべてのdivのリストが正しく返される原因です。私の質問は、そのようなdiv要素の幅を返す方法は本当に単純です

Answer 1

あなたは指定されたインデックス.Hereでdivを取得するためにeqを使用する必要があります例です。

EQ方法は、マッチしたセットを減らします指定されたインデックスの要素に要素を追加します。

var length=$('.parentClass').length; 
 
for(i=0;i<length;i++){ 
 
    console.log($('.parentClass').eq(i).width()); 
 
}

.parentClass{ 
 
    width:50px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="parentClass"></div> 
 
<div class="parentClass"></div>

別の解決策はeach()方法を使用することです。

$("#parentID .childClass").each(function(){ 
    //code 
}); 

Answer 2

これを行うためのjQueryプラグインを作成できます。親要素内の子要素を見つけてnᵗrench項目を探します。

(function($) { 
 
    $.fn.nthChild = function(childSelector, n) { 
 
    return this.find(childSelector).eq(n); 
 
    }; 
 
    $.fn.nthChildWidth = function(childSelector, n) { 
 
    return this.nthChild(childSelector, n).width(); 
 
    }; 
 
})(jQuery); 
 

 
console.log($('#parent-id').nthChildWidth('.child-class', 0)); 
 
console.log($('#parent-id').nthChildWidth('.child-class', 1));

.as-console-wrapper { top: 0; max-height: 100% !important; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="parent-id"> 
 
    <div class="child-class" style="width:200px"></div> 
 
    <div class="child-class" style="width:300px"></div> 
 
</div>