Javascript 如何展开div，然后单击将div添加到列表中的下一项

我之前问过一个问题，虽然这个问题有效，但我问错了问题的类型。在移除和添加类的过程中，我尝试在另一个div中包装和展开一个div，并在单击下一个项目时将一个div包装到下一个项目中

我试图做的是删除项目1周围的.current的div包装，并在项目2中的下一个项目上包装名为.current的div

我的代码：

作用{ $next-item.onclick，函数{ var curr=$'.nav right'.children.current'；//find.current 如果curr.next.length>0{//如果要在最后一个元素处停止 curr.next.wrapInner'current'；//在下一项周围加一个div curr.contents.unwrap；//从上一项展开div } }; }; .当前{ 边框：1px实心 } 下一项 项目1 项目2 项目3 项目4 项目5

---

下面的代码使onclick能够循环，即使从开始到结束：

$(function(){

    // store all items 
    var allItems =  $(".nav-right").children();

    // initialize for loop counter
    var i = 0;

    // onclick
    $("#next-item").on("click", function(){

       // select the current item 
       var wrapper = document.querySelector('.current');

       // removing the current wrapper 
       wrapper.outerHTML = wrapper.innerHTML;

       // looping and wrap the next item with current div
       i = (i + 1) % allItems.length;
       allItems.eq(i).wrapInner('<div class="current"></div>');
    });


});

根据@daniel beck的建议更新：

$(function(){

    // store all items 
    var allItems =  $(".nav-right").children();

    // initialize for loop counter
    var i = 0;

    // onclick
    $("#next-item").on("click", function(){

       // select the current item and remove the current wrapper 
       $('.current').contents().unwrap();

       // looping and wrap the next item with current div
       i = (i + 1) % allItems.length;
       allItems.eq(i).wrapInner('<div class="current"></div>');
    });


});

---

下面的代码使onclick能够循环，即使从开始到结束：

$(function(){

    // store all items 
    var allItems =  $(".nav-right").children();

    // initialize for loop counter
    var i = 0;

    // onclick
    $("#next-item").on("click", function(){

       // select the current item 
       var wrapper = document.querySelector('.current');

       // removing the current wrapper 
       wrapper.outerHTML = wrapper.innerHTML;

       // looping and wrap the next item with current div
       i = (i + 1) % allItems.length;
       allItems.eq(i).wrapInner('<div class="current"></div>');
    });


});

根据@daniel beck的建议更新：

$(function(){

    // store all items 
    var allItems =  $(".nav-right").children();

    // initialize for loop counter
    var i = 0;

    // onclick
    $("#next-item").on("click", function(){

       // select the current item and remove the current wrapper 
       $('.current').contents().unwrap();

       // looping and wrap the next item with current div
       i = (i + 1) % allItems.length;
       allItems.eq(i).wrapInner('<div class="current"></div>');
    });


});

---

您用于查找当前项的初始选择器不正确，如果它是一个查找而不是子项，那么它最终将与.current div本身匹配，而不是与您想要的父元素匹配；与children不匹配，因为.current不是.nav right的直接子级

你的捕虾人也不正确；您需要传递完整的DOM元素，而不仅仅是类名

$next-item.onclick，函数{ var curr=$'.nav right.current'.parent；//查找.current的父项 如果curr.next.length>0{ curr.childrent.contents.unwrap；//remove.current curr.next.wrapInner；//将其添加到下一个元素 } }; .当前{ 边框：1px实心 } 下一项 项目1 项目2 项目3 项目4 项目5

---

您用于查找当前项的初始选择器不正确，如果它是一个查找而不是子项，那么它最终将与.current div本身匹配，而不是与您想要的父元素匹配；与children不匹配，因为.current不是.nav right的直接子级

你的捕虾人也不正确；您需要传递完整的DOM元素，而不仅仅是类名

$next-item.onclick，函数{ var curr=$'.nav right.current'.parent；//查找.current的父项 如果curr.next.length>0{ curr.childrent.contents.unwrap；//remove.current curr.next.wrapInner；//将其添加到下一个元素 } }; .当前{ 边框：1px实心 } 下一项 项目1 项目2 项目3 项目4 项目5

---

请检查下面的链接。我已经更新了答案。关于.current和.current2是否有除样式之外的独特内容或其他内容？请检查以下链接。我已经更新了答案。是否有唯一的内容或关于.current和.current2的内容而不是样式？直接写入outerHTML会破坏被覆盖内容中的任何事件绑定或表单输入值，这可能是不可取的。在这里，jQuery的.unwrap可能是一个更好的选择。直接写入outerHTML的副作用是破坏被覆盖内容中的任何事件绑定或表单输入值，这可能是不可取的。jQuery的.unwrap在这里可能是一个更好的选择。