为“某些选择”中具有相同父类的所有选项添加Class使用jquery

add Class for all options within "some selects with same parent class" using jquery?

本文关键字：父类 选项 添加 jquery 使用 Class 选择 某些选择      更新时间：2023-09-26

我想使用jQuery链接在Wordpress重力表单。为了使用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" );
});

我会这样做:

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

ok，我明白了:

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

工作现在。谢谢你

相关文章：