如何获取类属性值的一部分？答案

【问题标题】：How can I get a part of the value of class attribute?如何获取类属性值的一部分？
【发布时间】：2017-09-24 20:07:07
【问题描述】：

这是我的 HTML 结构：

<tr>
    <td class="option_name_twitter">Something</td>
    <td class="option_loading">
        <img src="img/checked_successfully.png">
    </td>                        
</tr>
<tr>
    <td class="option_name_instagram">Something else</td>
    <td class="option_loading">
        <img src="img/checked_successfully.png">
    </td>                        
</tr>

这是我的代码：

$(document).on('click', "img[src$='checked_successfully.png']", function () {
    var name = $(this).closest('td.option_loading').sibilings('td.^option_name_').attr('class');
})

我正在尝试获取以option_name_ 开头的元素的类名值的最后一部分。所以预期的结果是twitter 或instagram。我该怎么做？

【问题讨论】：

这是一个用于提取类名的小 sn-p。应该是最便宜的版本（没有正则表达式、拆分、弹出等）：name = name.substr( 1 + name.lastIndexOf('_') );

标签： javascript jquery regex jquery-selectors

【解决方案1】：

您可以通过从兄弟td 获取class 来实现此目的，使用_ 将其拆分为一个数组，然后将pop() 从最后一个元素中取出以获得您需要的值。像这样的：

$(document).on('click', "img[src$='checked_successfully.png']", function() {
  var name = $(this).closest('td.option_loading').prev('td').attr('class');
  var site = name.split('_').pop();
  console.log(site);
})

img {
  border: 1px solid red;
  width: 30px;
  height: 30px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td class="option_name_twitter">Something</td>
    <td class="option_loading">
      <img src="img/checked_successfully.png">
    </td>
  </tr>
  <tr>
    <td class="option_name_instagram">Something else</td>
    <td class="option_loading">
      <img src="img/checked_successfully.png">
    </td>
  </tr>
</table>

但是您应该注意，以这种方式使用class 字符串并不理想，因为它很容易被破坏。在属性末尾添加另一个类将破坏此代码。更好的方法是将您需要的值存储在其自己的数据属性中 - 假设您有权编辑 HTML。

【讨论】：