Comment puis-je obtenir une partie de la valeur de l'attribut class?

Question

Voici ma structure 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> 

Et voici mon code:

$(document).on('click', "img[src$='checked_successfully.png']", function() { 
    var name = $(this).closest('td.option_loading').sibilings('td.^option_name_').attr('class'); 
}) 

Je suis en train de faire la dernière partie de la valeur du nom de classe d'un élément qui commence par option_name_. Donc, le résultat attendu est twitter ou instagram. Comment puis je faire ça?

Answer 1

Vous pouvez y parvenir en obtenant le class de la fratrie td, scindant pour un tableau en utilisant _, puis pop() hors le dernier élément pour obtenir la valeur dont vous avez besoin. Quelque chose comme ceci:

$(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>

Vous devez cependant noter que l'utilisation de la chaîne class de cette manière est pas idéal, car il est très facile à briser. L'ajout d'une autre classe à la fin de l'attribut va casser ce code. Une approche beaucoup mieux serait de stocker la valeur dont vous avez besoin dans son propre attribut de données - en supposant que vous avez accès à modifier le code HTML.