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

私はoption_name_から始まる要素のクラス名の値の最後の部分を取得しようとしています。期待される結果はtwitterまたはinstagramです。どうやってやるの？

Answer 1

あなたが必要な値を取得するために最後の要素をオフpop()そして、_を使用して配列にして、それを分割し、兄弟tdからclassを取得することにより、これを達成することができます。このような何か：

$(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を編集するためのアクセス権があると仮定します。