Как получить доступ к первому дочернему элементу в jquery

Question

У меня есть событие click, которое выполняет код внутри функции. Мне нужно использовать $(this), потому что мне нужно сослаться на тот элемент, на который я нажал, а не на что-либо еще.

Есть ли способ получить доступ к первому дочернему элементу элемента, используя $(this)?
Это мой код:

$('#songs_box tr td.playtitle').click(function () {
    var tr = $(this).parent();

    if(tr.hasClass("active")){
        if (audio.paused) {
            $(this).firstChild.innerHTML = '<i class="fas fa-pause"></i>';
            audio.play();
        } else {
            $(this).firstChild.innerHTML = '<i class="fas fa-play"></i>';
            audio.pause();
        }
    } else {
        audio.pause();
        initAudio(tr);
        audio.play();
    }
});

Answer 1

firstChild и innerHTML - это свойства нативного JS объекта элемента, а не объекта jQuery, который создает $(this).

Чтобы исправить это, используйте children().first().html() :

$(this).children().first().html('<i class="fas fa-pause"></i>');

В качестве альтернативы вы можете просто переключить класс на i напрямую:

$(this).find('i').toggleClass('fa-pause fa-play');

В любом случае я бы предложил провести сканирование через jQuery документация , так что вы получите представление о доступных методах. Функциональность подавляющего большинства из них можно понять только по их именам.