各divをループしてからCSSを適用する

Question

私は、同じクラスを持つdivのセットをループして、いくつかのjqueryを実行しようとしています。それは最初のdivのために正しく実行されていますが、次の3では、同じCSSが適用されます。私はいくつかのことを試しましたが、まだそれを働かせていません。現在、私のjqueryの

$('div.service-card').each(function() { 
    var test = $(this).find('.shbw').outerWidth(); 
    $('.service-triangle').css('right', test + 'px'); 
}); 

とHTML

<div class="service-card">  
    <div class="service-triangle"></div> 
    <span class="shbw">Test 1</span> 
</div> 
<div class="service-card">  
    <div class="service-triangle"></div> 
    <span class="shbw">Test 2</span> 
</div> 
<div class="service-card">  
    <div class="service-triangle"></div> 
    <span class="shbw">Test 3</span> 
</div> 
<div class="service-card">  
    <div class="service-triangle"></div> 
    <span class="shbw">Test 5</span> 
</div> 

私はDIV個別に適用することができますどのように任意のアイデア？

Answer 1

を使用せずに、代わりに、$ `の現在div.service-card

$('div.service-card').each(function() { 
    var test = $(this).find('.shbw').outerWidth(); 
    $(this).find('.service-triangle').css('right', test + 'px'); 
}); 

Answer 2

jQuery(selector [, context ])

使用ハンドラ関数の内部thisコンテキスト、コンテキストは、コンテキストとして使用するDOM要素、ドキュメント、またはjQueryの以外の何ものでもありません。

$('div.service-card').each(function() { 
 
    var test = $(this).find('.shbw').outerWidth(); 
 
    $('.service-triangle', this).css('right', test + 'px'); 
 
    //--------------------^^^^^^ 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="service-card"> 
 
    <div class="service-triangle"></div> 
 
    <span class="shbw">Test 1</span> 
 
</div> 
 
<div class="service-card"> 
 
    <div class="service-triangle"></div> 
 
    <span class="shbw">Test 2</span> 
 
</div> 
 
<div class="service-card"> 
 
    <div class="service-triangle"></div> 
 
    <span class="shbw">Test 3</span> 
 
</div> 
 
<div class="service-card"> 
 
    <div class="service-triangle"></div> 
 
    <span class="shbw">Test 5</span> 
 
</div>

から要素.service-triangleを選択するために使用find()jQuery.each

$('div.service-card .service-triangle').css('right', function() { 
 
    return $(this).next('.shbw').outerWidth(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="service-card"> 
 
    <div class="service-triangle"></div> 
 
    <span class="shbw">Test 1</span> 
 
</div> 
 
<div class="service-card"> 
 
    <div class="service-triangle"></div> 
 
    <span class="shbw">Test 2</span> 
 
</div> 
 
<div class="service-card"> 
 
    <div class="service-triangle"></div> 
 
    <span class="shbw">Test 3</span> 
 
</div> 
 
<div class="service-card"> 
 
    <div class="service-triangle"></div> 
 
    <span class="shbw">Test 5</span> 
 
</div>