Question

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

$("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}`);

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

3 个答案: