jquery - jquery中如何访问元素的第一个子元素

Question

我有一个在函数内执行代码的单击事件。我需要使用 $(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 是 native JS Element 对象的属性，而不是 $(this) 创建的 jQuery 对象。

要解决此问题，请改用 children().first().html():

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

或者，您可以直接在 i 上切换类:

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

无论如何，我建议扫描 jQuery documentation这样您就可以了解可用的方法。其中绝大多数的功能只需从名称即可了解。