if/each文を実行してdivを選択し、背景イメージの位置を個別に変更します

Question

現在、div内の背景イメージの位置をスパン内のテキストに応じて変更しようとしています。

私の問題は、複数のdivに同じクラスがあり、変更できないということです。

たとえば、

スパンクラスのステータス値がどこかの間に1〜10を変更する

<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> 

：私は画像の位置を変更したいすべてのセルは次のようになります。

私の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"); 
     } 
    }); 

私の問題jQueryのは、すべてのJS-gridImageを実行したときである私は、彼らのspanvaluesに依存して変更する必要があるとして、その後("background-position", "-4px -387px")どこに変わります。

私はe（）関数を見たことがありますが、それを自分のコードに組み込むにはどうすればよいか分かりません。

ありがとうございます。

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