使用jquery为“一些具有相同父类的选择”中的所有选项添加类？答案

【问题标题】：add Class for all options within "some selects with same parent class" using jquery?使用jquery为“一些具有相同父类的选择”中的所有选项添加类？
【发布时间】：2015-10-04 15:53:18
【问题描述】：

我想在 Wordpress Gravity Form 中使用 jQuery Chained。对于使用 jquery 链接，我必须手动添加类“城市”的选择列表中的选项元素中。我有 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" );

它工作正常，但只是在家庭地址部分。因此它不会在 Work Place Address 部分的上述代码中将类添加到第四个选择中。我发现我应该使用 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" );
});

【问题讨论】：

在第二对选择中你没有 li 元素，所以选择器什么也找不到

标签： javascript jquery each chained chained-select

【解决方案1】：

好吧，我想通了：

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

现在工作。谢谢

【讨论】：

【解决方案2】：

我会这样做：

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

【讨论】：

tnx 阿拉米尔。使用这种方法，我必须在城市变量中放入 ~1300 个名称：D
嗯，我正在使用我拥有的信息。您应该澄清一下，城市的数量比示例中的要多得多。