Question

我正在尝试克隆li元素但没有标记。我尝试了很多不同的方法，但我可以让它看起来有效。

当我看一下li元素的html时，它仍然会选择span标签。

以下是我正在使用的代码。任何帮助将非常感激。谢谢！

<ul class="todo_list_items" data-category_id="44">
    <li class="tasks" data-task_id="30">
        <!-- Don't want to select this span class -->
        <span class="modify_tasks">
            <a href='#' class='delete_task_name'>Delete</a>
            <a href='#' class='edit_task_name'>Edit Task</a>
        </span>
        <a href="http://localhost/GuruCoders/projcollab/taskdiscussions/index/30/44">Test</a>
    </li>
</ul>
<script>
$(document).on("click", ".edit_task_name", function () {
    var task_id = $(this).data("task_id");
    var previous = $(".tasks[data-task_id=30]").not(".tasks[data-task_id=30] > span").clone();
    console.log(previous.html());
});
</script>

Answer 1

只需克隆它然后清空它：

var previous = $(".tasks[data-task_id=30]").clone().empty();

编辑：如果您只想删除范围而不删除其他内容，则只需从克隆中删除范围：

var previous = $(".tasks[data-task_id=30]").clone();
previous.children("span").remove();

Answer 2

not（）将检查集合中的元素，在您的情况下，集合仅包含$（＆＃34; .tasks [data-task_id = 30]＆＃34;）。 not（）正在测试它内部的span，看它是否与它自己的父匹配，所以不要调整你的jQuery对象进行克隆。实现所需内容的另一种方法可能是与此类似的代码：

var   $tasks        = $(".tasks[data-task_id=30]"),
      $modifyTasks  = $tasks.children('span').detach(),
      $cloneOfTasks = $tasks.clone();

$modifyTasks.prependTo($tasks);
$cloneOfTasks.appendTo($tasks.parent());

.detach（）删除跨度而不会丢失事件和数据，因此您可以在完成克隆时将其重新放入。

或者，此代码可能更容易解释和使用：

    var $tasks        = $(".tasks[data-task_id=30]");

    $('ul.todo_list_items').append($tasks.contents().not('span').clone().wrap('<li class="tasks" data-task_id="30">').closest('li'));

这使用.contents（）来抓取任务中的内容，这样你就可以不对它运行。需要最接近（＆＃39; li＆＃39;）的部分以确保返回包裹在新元素周围的li以附加到ul。

需要帮助将.not（）选择器与嵌套元素一起使用

2 个答案: