Question

我有一个WordPress网站，在网格中显示多个帖子。其中一些帖子将在块的第一个div中包含一个额外的类 - .featured或.expired。我试图在加载后对这些进行排序，以便首先列出“特色”，最后列出“过期”。 div的样本：

<div class="search_results grid_style">
<div class="col-lg-3 itemdata itemid1012 item-1012 expired"></div>
<div class="col-lg-3 itemdata itemid1013 item-1013"></div>
<div class="col-lg-3 itemdata itemid1014 item-1014 featured"></div>
<div class="col-lg-3 itemdata itemid1015 item-1015"></div>
<div class="col-lg-3 itemdata itemid1016 item-1016"></div>
</div>

我在文档就绪时为这些equalheight设置了类似的功能divs。我需要添加什么，所以div也按照上面的描述进行排序？

<script>
jQuery(document).ready(function() {
    setTimeout(function(){equalheight('.grid_style .itemdata');  }, 2000); 
});  
</script>

Answer 1

尝试这个并在WP中根据需要自定义它（当你点击过期时，它会读取所有div，根据过期类的存在对它们进行排序并将所有内容添加回容器）：

＆＃13;

var $divs = $("div.box");

$('#sortBnt').on('click', function () {
    var orderedDivs = $divs.sort(function (a, b) {
    var x = 0, y =0;
    if($(a).hasClass('expired')) x = 3;
    if($(a).hasClass('featured')) x = -1;
    if($(b).hasClass('expired')) y = 3;
    if($(b).hasClass('featured')) y = -1;
    return x - y;
    });
    $("#container").html(orderedDivs);
});

＆＃13;

.box {
    background: red;
    height: 100px;
    width: 400px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
    <button id="sortBnt">expired</button>
    <div id="container">
      <div class="box expired">
        <h1>B<h1>
        <h2>expired</h2>
      </div>
    
      <div class="box">
        <h1>A<h1>
        <h2></h2>
      </div>
    
      <div class="box expired">
        <h1>D<h1>
        <h2>expired</h2>  
      </div>
    
      <div class="box featured">
        <h1>C<h1>
        <h2>featured</h2>
      </div>
    </div>
</div>

＆＃13;

jQuery使用额外的div类排序

1 个答案: