有没有更好的方法来重复链接的jQuery方法？

Question

我重复.last().text() （见下文）。 有没有一种方法可以使我更有效地执行此操作，以使我的代码看起来不那么冗长？ 是否可以将.last().text()在变量中？ 我是新手。

$("div").last().text(`${date} `).append("<span class = 'username'></span><span class = 'text'></span>");
$(".username").last().text(`${message.username}`);
$(".text").last().text(` ${message.text}`);

Answer 1

把它放在一个函数中

const setTextToLastOf = (selector, text) => {
    return $(selector).last().text(text);
}

然后用

const appendText = "<span class = 'username'></span><span class = 'text'></span>";
setTextToLastOf("div", `${date} `).append(appendText);
setTextToLastOf(".username", `${message.username}`);
setTextToLastOf(".text", ` ${message.text}`);

Answer 2

您可以创建自己的jQuery函数。

在下面的代码片段中，您可以看到如何为jQuery定义lastText()函数。

更新了答案，因此您也可以设置最后一个文本。

如果设置了文本，则返回jQuery对象（ this ），以便可以在其上保留链接函数。 如果获取文本，则该函数将返回带有最后一个元素的文本的字符串。

 jQuery.fn.lastText = function(text) { if(text == null) { return this.last().text(); } else { return this.last().text(text); } }; $(document).ready(function(){ var currLastText = $('.par').lastText(); console.log("current last text: " + currLastText ); var newLastText = $('.par').lastText("Last").lastText(); console.log("New last text: " + newLastText); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p class="par">First</p> <p class="par">Second</p> 

Answer 3

减少混乱的一种方法是使用:last选择器：

$("div:last").text(`${date} `).append("<span class = 'username'></span><span class = 'text'></span>");
$(".username:last").text(`${message.username}`);
$(".text:last").text(` ${message.text}`);