如何获得class属性值的一部分？

Question

这是我的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');
})

我正在尝试获取classname的一个元素值的最后一部分option_name_.所以预期的结果是twitter或者instagram.我怎样才能做到这一点？

Answer 1

您可以通过class从兄弟中获取td,使用_,然后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.