Добавить класс для всех опций в "некоторые выбирает с тем же родительским классом", используя jquery?

Я хочу использовать jQuery Chained в Wordpress Gravity Form. для использования jquery в цепочке, я должен вручную добавить классы в элементах option в списках выбора с классом "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" );
});
Источник

2 ответа

Я бы сделал это так:

var city = ["tehran","tehran","tehran","semnan","semnan","qom","qom"];
$("li.city select > option").each(function(index) {
    $(this).addClass(city[index]);
});
Источник

Хорошо, я понял это:

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

работает в настоящее время. благодарю вас

Источник
Другие вопросы по тегам