使用jQuery為“某些具有相同父類的選擇項”中的所有選項添加類？

Question

我想在Wordpress Gravity Form中使用jQuery Chained 。 為了使用鏈接的jquery，我必須在類為“ city”的選擇列表中的選項元素中手動添加類。 我有2個選擇城市類和2個選擇與州級。

所以我需要4個完全一樣的選擇：

//////////////////// Home Place Address ////////////////////

<li class="state">
<select name="state">
  <option value="">Choose your State</option>
  <option value="tehran">Tehran</option>
  <option value="semnan">Semnan</option>
  <option value="qom">Qom</option>
</select>
</li>
<li class="city">
<select name="city">
  <option value="">Choose your City</option>
  <option value="city1" class="tehran">city 1</option>
  <option value="city2" class="tehran">city 2</option>
  <option value="city3" class="tehran">city 3</option>
  <option value="city4" class="semnan">city 4</option>
  <option value="city5" class="semnan">city 5</option>
  <option value="city6" class="qom">city 6</option>
  <option value="city7" class="qom">city 7</option>
</select>
</li>

//////////////////// Work Place Address ////////////////////

<li class="state">
<select name="state">
  <option value="">Choose your State</option>
  <option value="tehran">Tehran</option>
  <option value="semnan">Semnan</option>
  <option value="qom">Qom</option>
</select>
</li>
<li class="city">
<select name="city">
  <option value="">Choose your City</option>
  <option value="city1" class="tehran">city 1</option>
  <option value="city2" class="tehran">city 2</option>
  <option value="city3" class="tehran">city 3</option>
  <option value="city4" class="semnan">city 4</option>
  <option value="city5" class="semnan">city 5</option>
  <option value="city6" class="qom">city 6</option>
  <option value="city7" class="qom">city 7</option>
</select>
</li>

為了將類添加到選項，我正在使用此jQuery代碼：

jQuery( "li.city select > option" ).slice(1,3).addClass( "tehran" );
jQuery( "li.city select > option" ).slice(3,5).addClass( "semnan" );
jQuery( "li.city select > option" ).slice(5,7).addClass( "qom" );

它工作正常，但僅在“家鄉地址”部分中。 因此它不會在“工作地點地址”部分的上述代碼中為第四個選擇添加類。 我發現我應該使用jquery .each（）。 但是我無法正常工作。 我嘗試了這個沒有成功：

jQuery("li.city select > option").each(function() {
    var $this = jQuery(this);
    $this.slice(1,3).addClass( "tehran" );
    $this.slice(3,5).addClass( "semnan" );
    $this.slice(5,7).addClass( "qom" );
});

Answer 1

我會這樣做：

var city = ["tehran","tehran","tehran","semnan","semnan","qom","qom"];
$("li.city select > option").each(function(index) {
    $(this).addClass(city[index]);
});

Answer 2

好吧，我想通了：

jQuery('li.city select').each(function(){           
jQuery(this).find('option').slice(1,3).addClass( "tehran" );
jQuery(this).find('option').slice(3,5).addClass( "semnan" );
jQuery(this).find('option').slice(5,7).addClass( "qom" );
   });

現在工作。 謝謝