Question

<div class="nav-top">
  <ul>
      <li class="test tab1"><a href="/">test</a></li>
      <li class="tes tab2"><a href="#">test</a></li>
      <li class="tes tab3"><a href="#">test</a></li>
      <li class="navahead"><a href="#">test</a></li>
      <li class="navahead"><a href="#">test</a></li>
      <li class="new"><a href="#">test</a></li>
  </ul>
</div>
<div id="subnav-content" class="tab1">hello world</div>

假设一个如下变量：

var tab_class = $(this).attr('class');   //this equals li

我想在以下代码中单独使用tab1 tab2 tab3，例如：

$("#subnav-content div." + tab_class).show();

tab_class将获得两个值（测试tab1）。如何摆脱考验和空间？

Answer 1

tab_class.split(/\s+/).pop()

获得最后一堂课。

编辑：但是，正如Tarun所指出的，类可以在渲染时按字母顺序重新排列。所以我的投票是Shef's answer，但你需要检查是否有任何匹配，然后再与数组一起处理它。

Answer 2

tabs = tab_class.match(/(tab\d+)/g);
tab_class = (tabs) ? tabs[0] : 'none';

更新代码以解释@ Hnatt的建议。

使用此代码，如果变量tab_class包含类名称，例如tab1，tab2，...将为其分配该名称，否则将为其分配{{ 1}}。

Test case

而不是摆脱none和空间，而是专注于从该变量中获取test。

此外，这是不正确的：

tab1

应该是

$("#subnav-content div." + tab_class).show();

Answer 3

var tab_class = $(this).attr('class').split(' ')[1]

但硬编码索引可能不太好;]

Answer 4

只是一个建议，为什么不写下你的代码：

<div class="nav-top">
  <ul>
      <li class="test tab1" id="tab1-link"><a href="/">test</a></li>
      <li class="tes tab2" id="tab2-link"><a href="#">test</a></li>
      <li class="tes tab3" id="tab3-link"><a href="#">test</a></li>
      <li class="navahead" id="tab4-link"><a href="#">test</a></li>
      <li class="navahead" id="tab5-link"><a href="#">test</a></li>
      <li class="new" id="tabx-link"><a href="#">test</a></li>
  </ul>
</div>
<div id="subnav-content" class="tab1">hello world</div>

然后使用以下js：

...
var tab_class = $(this).attr('id');
tab_class = tab_class.replace('-link','');
...

这里的优点是不存在任何JS错误。性能不会受到影响，因为我们只是为DOM元素分配ID。

Answer 5

你可以这样做：

 tab_class = tab_class.replace('tes ','');

如何在jquery中获得第二个类？

5 个答案: