使用jQuery重新排序元素

Question

我正在为混凝土设计一个主题。 当前，在5.6.2.1版中Concrete5使用jQuery 1.7.2，我已经创建了一个关于我的生物块，如下所示：

<div class="bio-block row" id="<?php echo rand(); ?>">
    <div class="bio-image 4u" style="text-align: center;">
    <img src="/path/to/pic" width="100%" style="max-width:239px;" margin="auto" alt="" />
</div>
<div class="bio-text 8u">
    <h2><span>Name</span>
 - Title</h2>

    <div class="bio">
    <p dir="ltr">Content</div>
</div>
</div>

在桌面上查看时，我希望每个其他块在左侧交替显示图片，在右侧交替显示图片，等等。使用jsfiddle，我可以使用以下方法来工作：

var c = jQuery(window).width();
console.log(c);
if (c >= 820){
    jQuery(".bio-block:nth-child(odd)").each(function() {
        if (id != null){
        jQuery("#"+id+" > .bio-image").before(jQuery("#"+id+" > .bio-text"));
    }
    });
} else {
    jQuery(".bio-block:nth-child(odd)").each(function() {
        if (id != null){
        jQuery("#"+id+" > .bio-image").after(jQuery("#"+id+" > .bio-text"));
    }
    });
}

但是当它在外部js文件中时，我无法在页面上执行它。

我需要包括一些东西才能开始吗？ 也许是页面加载调用函数？

Answer 1

您最有可能在页面上的元素之前调用它。 准备使用dom。

$(function() {

    var c = jQuery(window).width();
    console.log(c);
    if (c >= 820){
        jQuery(".bio-block:nth-child(odd)").each(function() {
            jQuery(".bio-image").before(jQuery(".bio-text"));
        });
    } else {
        jQuery(".bio-block:nth-child(odd)").each(function() {
            jQuery(".bio-image").after(jQuery(".bio-text"));
        });
    }

});

另一种选择是将script标签放在正文的末尾而不是头部。