Jquery получает список классов от родителя зацикленного элемента

Question

Я создал несколько флажков в HTML, и теперь я хотел бы получать список классов родительского элемента флажка каждый раз, когда он проверяется.

Для этого я перебрал проверенные элементы и попытался использовать $(this).parent()который действительно вернул родителя, но если я добавлю .classList в его конец, то в журнал будет записано undefined.Я пытался делать другие вещи и $(this).parent().css( "background-color", "red" ); работает как запланировано.Возможно также, что я неправильно структурировал свою функцию, но, похоже, не могу найти ошибку.Может ли кто-нибудь любезно указать, почему $(this).parent().classList возвращает неопределенное значение?

Любая помощь с благодарностью.

    jQuery(function($) {
        function getClassList (){
            $(document).ready(function(){
                $('.single-checkbox').change(function() {
                    $('.single-checkbox').each(function() {
                        if( this.checked ){
                            console.log( $(this).parent() );
                            console.log( $(this).parent().classList );
                            $(this).parent().css( "background-color", "red" );
    
                    });
                });
            });
        }
        getClassList();
    
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li class="input-wrapper post-id-145">
      <input type="checkbox" class="single-checkbox">
    </li>
    
    <li class="input-wrapper post-id-116">
      <input type="checkbox" class="single-checkbox">
    </li>
    
    <li class="input-wrapper post-id-176">
      <input type="checkbox" class="single-checkbox">
    </li>
    
    <li class="input-wrapper post-id-151">
      <input type="checkbox" class="single-checkbox">
    </li>

Answer 1

Попробуй это.вам не нужно проверять ischeckd или перебирать все флажки ..

jQuery(function($) {
     $(".single-checkbox").change(function(){
       let classNames = $(this).parent().attr('class');
       //list of parrent classnames in array
       console.log(classNames.split(" "));
      })
 });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li class="input-wrapper post-id-145">
      <input type="checkbox" class="single-checkbox">
    </li>
    
    <li class="input-wrapper post-id-116">
      <input type="checkbox" class="single-checkbox">
    </li>
    
    <li class="input-wrapper post-id-176">
      <input type="checkbox" class="single-checkbox">
    </li>
    
    <li class="input-wrapper post-id-151">
      <input type="checkbox" class="single-checkbox">
    </li>

Answer 2

В вашем коде было так много всего, что нужно почистить.Ниже рабочая исправленная версия.Ваш IF отсутствует конец} и ..

Они в основном делают то же самое jQuery (функция ($) {и $ (документ) .ready (function () {

, и вы не 'Это необходимо использовать, если вы проверяете изменения даже при загрузке страницы

function getClassList (){

Это обновленный код:

            $(document).ready(function(){
                $('.single-checkbox').change(function() {
                    $('.single-checkbox').each(function() {
                        if( this.checked ){
                            console.log( $(this).parent() );
                            console.log( $(this).parent().attr('class'));
                            $(this).parent().css( "background-color", "red" );
                         }
                    });
                });
            });
    

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li class="input-wrapper post-id-145">
      <input type="checkbox" class="single-checkbox">
    </li>
    
    <li class="input-wrapper post-id-116">
      <input type="checkbox" class="single-checkbox">
    </li>
    
    <li class="input-wrapper post-id-176">
      <input type="checkbox" class="single-checkbox">
    </li>
    
    <li class="input-wrapper post-id-151">
      <input type="checkbox" class="single-checkbox">
    </li>