如何獲取類屬性值的一部分？

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。