循環播放每個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

使用find()從選擇的元素.service-triangle當前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>

不使用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>