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

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

您可以从兄弟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。