“Working”脚本返回Uncaught DOMException：无法在“Node”上执行“insertBefore”：新的子元素包含父元素
我正在构建一个首先从外部页面获取HTML数据的页面（非跨域），然后在第一个函数完成后，它运行一个侧面显示的函数。 它的工作原理……或多或少……
我遇到的问题是，在5或6张幻灯片之后，整个事情变得混乱，然后一切都消失了。 检查控制台时，我发现以下消息：
Uncaught DOMException: Failed to execute 'insertBefore' on 'Node': The new child element contains the parent. at HTMLDivElement. (xxxxxxxxxxxxxxxxx.com/jquery/jquery-1.12.4.js:6297:21) at domManip (xxxxxxxxxxxxxxxxx.com/jquery/jquery-1.12.4.js:6066:14) at jQuery.fn.init.after (xxxxxxxxxxxxxxxxx/jquery/jquery-1.12.4.js:6295:10) at HTMLDivElement. (xxxxxxxxxxxxxxxxx.com/go/scripts/jqueryautoscroll/autoscroll.js:41:47) at HTMLDivElement.opt.complete (xxxxxxxxxxxxxxxxx/jquery/jquery-1.12.4.js:7900:12) at fire (xxxxxxxxxxxxxxxxx.com/jquery/jquery-1.12.4.js:3232:31) at Object.fireWith [as resolveWith] (xxxxxxxxxxxxxxxxx/jquery/jquery-1.12.4.js:3362:7) at tick (xxxxxxxxxxxxxxxxx.com/jquery/jquery-1.12.4.js:7755:14) at jQuery.fx.tick (xxxxxxxxxxxxxxxxx.com/jquery/jquery-1.12.4.js:8069:9) 我认为它与container.find(elm + ':first').before(container.find(elm + ':last')); 所以我尝试评论所有的行，错误消失了，但随后滑块不会改变。
我的代码如下：
jQuery(document).ready(function ($) { $("#jobshome").load("jobs/newest-jobs .js-toprow", function(){ //rotation speed and timer var speed = 3000; var run = setInterval(rotate, speed); var slides = $('.js-toprow'); var container = $('#jobshome'); var elm = container.find(':first-child').prop("tagName"); var item_height = container.height(); var previous = 'prevabc'; //id of previous button var next = 'nextabc'; //id of next button slides.height(item_height); //set the slides to the correct pixel height container.parent().height(item_height); container.height(slides.length * item_height); //set the slides container to the correct total height container.find(elm + ':first').before(container.find(elm + ':last')); resetSlides(); //if user clicked on prev button $('#buttonsabc a').click(function (e) { //slide the item if (container.is(':animated')) { return false; } if (e.target.id == previous) { container.stop().animate({ 'top': 0 }, 1500, function () { container.find(elm + ':first').before(container.find(elm + ':last')); resetSlides(); }); } if (e.target.id == next) { container.stop().animate({ 'top': item_height * -2 }, 1500, function () { container.find(elm + ':last').after(container.find(elm + ':first')); resetSlides(); } ); } //cancel the link behavior return false; }); //if mouse hover, pause the auto rotation, otherwise rotate it container.parent().mouseenter(function () { clearInterval(run); }).mouseleave(function () { run = setInterval(rotate, speed); }); function resetSlides() { //and adjust the container so current is in the frame container.css({ 'top': -1 * item_height }); } }); //a simple function to click next link //a timer will call this function, and the rotation will begin function rotate() { jQuery('#nextabc').click(); } });
#carouselabc { position: relative; width: 60%; margin: 0 auto; } #slidesabc { overflow: hidden; position: relative; width: 100%; height: 250px; } #areadoslideabc { list-style: none; width: 100%; height: 250px; margin: 0; padding: 0; position: relative; } #slidesabcdef { width: 100%; height: 250px; float: left; text-align: center; position: relative; font-family: lato, sans-serif; } /* Styling for prev and next buttons */ .btn-barabc { max-width: 346px; margin: 0 auto; display: block; position: relative; top: 40px; width: 100%; } #buttonsabc { padding: 0 0 5px 0; float: right; } #buttonsabc a { text-align: center; display: block; font-size: 50px; float: left; outline: 0; margin: 0 60px; color: #b14943; text-decoration: none; display: block; padding: 9px; width: 35px; } a#prevabc:hover, a#next:hover { color: #FFF; text-shadow: .5px 0px #b14943; }
截图1 
截图2 
这就是它的开始 
您的问题似乎是因为稍后移动的嵌套选择器（ .js-toprow ）而发生的。
尝试用.find()替换所有.find() （将任何级别的子级匹配.children() （仅匹配直接子级）。
jQuery(document).ready(function ($) { $("#jobshome").load("jobs/newest-jobs .js-toprow", function(){ //rotation speed and timer var speed = 3000; var run = setInterval(rotate, speed); var slides = $('.js-toprow'); var container = $('#jobshome'); var elm = container.children(':first-child').prop("tagName"); var item_height = container.height(); var previous = 'prevabc'; //id of previous button var next = 'nextabc'; //id of next button slides.height(item_height); //set the slides to the correct pixel height container.parent().height(item_height); container.height(slides.length * item_height); //set the slides container to the correct total height container.children(elm + ':first').before(container.children(elm + ':last')); resetSlides(); //if user clicked on prev button $('#buttonsabc a').click(function (e) { //slide the item if (container.is(':animated')) { return false; } if (e.target.id == previous) { container.stop().animate({ 'top': 0 }, 1500, function () { container.children(elm + ':first').before(container.children(elm + ':last')); resetSlides(); }); } if (e.target.id == next) { container.stop().animate({ 'top': item_height * -2 }, 1500, function () { container.children(elm + ':last').after(container.children(elm + ':first')); resetSlides(); } ); } //cancel the link behavior return false; }); //if mouse hover, pause the auto rotation, otherwise rotate it container.parent().mouseenter(function () { clearInterval(run); }).mouseleave(function () { run = setInterval(rotate, speed); }); function resetSlides() { //and adjust the container so current is in the frame container.css({ 'top': -1 * item_height }); } }); //a simple function to click next link //a timer will call this function, and the rotation will begin function rotate() { jQuery('#nextabc').click(); } });