目标最后一个 LI Javascript 然后操作

Target last LI Javascript then manipulate

本文关键字：然后 操作 Javascript LI 最后一个 目标      更新时间：2023-09-26

我想定位最后一个 LI 并将其转换为另一个元素。

例如，我有如下HTML标记

<ol class="questions">
   <li>Element</li>
   <li>Element</li>
   <li>Element</li>
</ol>

但我想让它使列表中的最后一个元素变成 DIV，然后列表元素在它之前关闭

<ol class="questions">
   <li>Text</li>
   <li>Text</li>
 </ol>
   <div class="changed-div">Text</div>

我怎样才能用javascript做到这一点？

我已经开始玩代码，例如

$('</ol>'}).insertBefore('.questions li:last-child');

谢谢大家

由于很明显

你正在使用jQuery，你可以这样做：

var lastElement = $("ol.questions li:last"); //Store the last element in a variable
$('ol.questions').after('<div class = "changed-div">' + lastElement.html() + '</div>'); //Create a new div after the list with the contents of the last element
lastElement.remove(); //Delete the last element

选择器有时会失败，我建议像这样选择 li 标签

var questionArray = $('.questions').find('li');

这将在你的ol内制作一个所有li的数组，以获得最后一个

var lastQuestion = questionArray[questionArray.length-1];
现在

您在变量中有最后一个问题，现在您可以提取文本并附加到您想要的任何内容

var  changed-div =  $('<div/>').addClass('changed-div').append(lastQuestion.html());
$('.questions').insertAfter(changed-div);

并从OL中去除Li

lastQuestion.remove();

这可能需要更多步骤，但可以更好地控制在 ol 和div 标签中添加和删除项目。

相关文章：