运行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"); 
});