我正在构建一个页面，该页面首先从外部页面（不是跨域）获取HTML数据，然后在第一个功能完成后，它运行一个即是边秀的功能。它或多或少...
我遇到的问题是5或6张幻灯片后，整个事情变得一团糟，然后一切都消失了。检查控制台时，发现以下消息：
Uncaught DOMException: Failed to execute 'insertBefore' on 'Node': The new child element contains the parent.
at HTMLDivElement.<anonymous> (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.<anonymous> (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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="carouselabc">
<div class="btn-barabc">
<div id="buttonsabc">
<a id="prevabc" href="#">Previous</a>
<a id="nextabc" href="#">Next</a>
</div>
</div>
<div id="slidesabc">
<div id="jobshome"></div>
</div>
</div>
屏幕截图1
屏幕截图2
这就是它的开始
最佳答案
您的问题似乎是由于嵌套选择器（.js-toprow）之后被移动而发生的。
尝试将所有.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();
}
});
关于javascript - “工作”脚本返回未捕获的DOMException:无法在“节点”上执行“insertBefore”:新的子元素包含父元素，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/52286193/