jQuery 文档中的每个元素

Question

我编写了一个代码来更改文档中每个文本区域（具有自动调整大小class）的大小。工作正常：

$(document).each('textarea.autosize', function(){

   $(this).attr("style", "height:" + (this.scrollHeight) + "px; overflow-y:hidden;");

}).on("input", function(){

   this.style.height = "auto";

   this.style.height = (this.scrollHeight) + "px";

});

但是我的网页内容是动态的。对于点击事件，我可以这样做：

$(document).on('click', '.myClass', function(){});

但是对于 each 我不能。我怎样才能对 DOM 中还没有的元素使用 each？

Answer 1

将自动调整大小功能放在一个函数中，您可以在向 DOM 添加元素时调用该函数：

function autosize() {
    $(document).each('textarea.autosize', function() {
       $(this).attr("style", "height:" + (this.scrollHeight) + "px; overflow-y:hidden;");
    }).on("input", function(){

       this.style.height = "auto";

       this.style.height = (this.scrollHeight) + "px";

    });
}

autosize();

如果添加元素，可以这样做：

$('.add').click(function() {
    $(document).append($('<textarea />', { class: 'autosize' }));
    autosize();
});

或者，如果您不想在任何地方添加它，您可以添加一些东西：

setInverval(autosize, 100);

警告：此解决方案被认为对您的性能不利！所以请考虑使用我的其他解决方案之一。

如果你只想这样做，当实际添加一个元素时，你可以通过 MutationObserver:

收听

var observer = new MutationObserver(function(mutations) {
    var elements = [ ...mutation.addedNodes].filter((node) => node.tagName.toLowerCase() === 'textarea' && node.classList.contains('.autosize'));
    if (elements.length) {
        autosize();
    }
});

observer.observe(document, {attributes: false, childList: true, characterData: false, subtree:true});

不再次查询已修改的元素可能对您的性能更好（如评论中所指出）：

$(document).each('textarea.autosize', autosize).on("input", resize);
function autosize() {function() {
   $(this).attr("style", "height:" + (this.scrollHeight) + "px; overflow-y:hidden;");
}

function resize() {
   this.style.height = "auto";

   this.style.height = (this.scrollHeight) + "px";
}

autosize();

在这种情况下，当添加新元素时，您必须运行 autosize() 和 resize()。

jQuery 文档中的每个元素

jQuery each element in document

javascript

jquery

dom