Question

在my website上，有一个代码可以向页面添加几个元素。这段代码不是我可以编辑的东西，而且我对它放置这些元素的位置不满意，因为它弄乱了我的一些布局。所以我提出了一个小jQuery来将它们移动到一个更理想的位置 - 我希望它们是其他代码用于父母的元素的兄弟。

$('.mini-profile').after(function() {
    var $infection = [$(this).children('.infection_badge'), $(this).children('.infection_button')];
    return $infection;
});

我有一个工作JSFiddle。

问题是当我将代码添加到页面时，此代码不起作用。我认为它可能在另一个脚本添加元素之前运行，所以我在窗口加载完成后尝试调用它，但这不起作用，我不知道还有什么可以尝试。有没有办法让这个工作或我将不得不想出另一种解决我的布局问题的方法？

Answer 1

<强>更新

忘记我的其余部分（我将保留它，因为它可以包含其他人的有用提示）并修改您的代码：

$( '.mini-profile' ).after( function() { 
    return $( this ).find( '.infection_badge, .infection_button' ) ; 
});

我不认为他们“相互冲突”。那将是jQuery与其他JS库发生冲突。而且，正如您可以阅读jQuery的文档：

包含jQuery库及其几乎所有插件在jQuery命名空间内。作为一般规则，全局对象是存储在jQuery命名空间内，所以你不应该得到一个 jQuery和任何其他库之间发生冲突...... (read more)

如果这确实是问题（你会知道它，因为没有jQuery代码可以工作），你可以阅读该文档的其余部分，以了解如何避免遇到冲突。

但是，最有可能的是，jQuery有效，而你的问题是当你调用jQuery函数时外部脚本没有完成它的工作。

如果您无法编辑其他脚本（并且您确定正确引用了jQuery库），您可以尝试以下解决方法：

收听$(window).load()事件：

当所有内容都已加载时，它将在$(document).ready()之后执行。因此，如果其他脚本使用它，则无法使用$(document).ready()修改其工作：
```
$(window).load( function() {
    $('.mini-profile').after(function() {
         return [$(this).children('.infection_badge'), $(this).children('.infection_button')];
    });
});
```

设置超时时间：

所以你给其他代码执行时间。

$(document).ready(function() {
    setTimeout(function() {
        $('.mini-profile').after(function() {
             return [$(this).children('.infection_badge'), $(this).children('.infection_button')];
        });
    }, 1000);
});

使用MutationObserver：

如MDN中所定义：

MutationObserver为开发人员提供了一种对a中的变化作出反应的方法 DOM

所以你可以等到其他脚本修改这些元素以进行自己的修改。
CSS黑客攻击：

当然它很混乱，但也许你只需使用CSS即可达到理想的效果。例如，去你的小提琴，删除所有的JS并添加这个CSS：
```
.infection_button {
    float: left;
    margin-top: 10px;
} 
```
如你所见，它看起来一样。我知道它会在你的实际布局中变得更加复杂，但是当其余部分失败时仍然需要尝试。

希望它有所帮助！

冲突的脚本......可能

1 个答案: