How to access a child element of $(this)

apwnn :

I have a click event which executes code inside the function. I need to use $(this) because I need to refer with that particular element I clicked and not anything else.

Is there a way to access to the first child of the element using $(this)?
This is my code:

$('#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();
    }
});
Rory McCrossan :

firstChild and innerHTML are properties of a native JS Element object, not a jQuery object, which is what $(this) creates.

To fix this use children().first().html() instead:

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

Alternatively you could just toggle the class on the i directly:

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

In any case I'd suggest having a scan through the jQuery documentation so you get an understanding of the methods available. The functionality of the vast majority of them can be understood just from their names.

Guess you like

Origin http://10.200.1.11:23101/article/api/json?id=398205&siteId=1
Recommended