運行if/each語句選擇div並獨立更改背景圖像位置

Question

我目前正在嘗試根據跨度內的文本更改div內的背景圖像的位置。

我的問題是多個div具有不可更改的相同類。

例如。在這裏我想改變圖像位置的每個細胞的樣子：

<td class="js-gridBlock js-Pre-order" data-attvalue1="3XL" data-attvalue2="Plum"> 
    <div class="js-gridImage"> 
    <div class="prodpageGridText" id="gridtext-gridbox34"> 
     <span class="status">Due in 4 weeks</span><br> 
     <div class="prodpageGridTextArrow"> 
     </div> 
    </div> 
    </div> 
</td> 

凡跨度類狀態值1-10之間的任何變化。

我的jQuery目前看起來像;當jQuery的正在運行的每

jQuery(document).ready(function() { 
     if (jQuery('span.status:contains("4")')) { 
      jQuery('.js-Pre-order .js-gridImage').css("background-position", "-4px -213px"); 
     } 
     if (jQuery('span.status:contains("5")')) { 
      jQuery('.js-Pre-order .js-gridImage').css("background-position", "-4px -242px"); 
     } 
    if (jQuery('span.status:contains("10")')) { 
      jQuery('.js-Pre-order .js-gridImage').css("background-position", "-4px -387px"); 
     } 
    }); 

我的問題是JS-gridImage然後改到("background-position", "-4px -387px")在那裏，因爲我需要他們改變依賴於他們的spanvalues。

我已經看到.each（）函數，但不確定如何最好地將它合併到我的代碼中。

在此先感謝。

Answer 1

您可以使用元素之間的關係，這裏可以使用.closest(selector)來遍歷以獲取所需的元素並設置CSS規則。

jQuery(document).ready(function() { 
    jQuery('span.status:contains("4")').closest('.js-gridImage').css("background-position", "-4px -213px"); 
    jQuery('span.status:contains("5")').closest('.js-gridImage').css("background-position", "-4px -242px"); 
    jQuery('span.status:contains("10")').closest('.js-gridImage').css("background-position", "-4px -387px"); 
});