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

我试图获取以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。

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

1 个答案: