根據定義的類在jQuery中排序

Question

這是我的 jsFiddle 代碼。

請幫我解決這個問題。 我想根據類名 product_tag-pro-1、product_tag-pro-2 ... 等按升序對其進行排序。但列表是根據 post-* 數字排列的。

我找不到解決辦法。

for(var i=1; i<=jQuery("body.term-california-online-practice-exams ul.products li").length; i++){
    var s = productContainer.find(">li:nth-child("+i+")").attr('class').split(' ').join('.');

    productContainer.append(productContainer.find("li").get().sort(function(a, b) {
        return parseInt(jQuery(a).attr("class").match(/\d+/), 10) - parseInt(jQuery(b).attr("class").match(/\d+/), 10)
    }))


}

http://jsfiddle.net/hassaan39/w4Lgfecq/

Answer 1

問題是您的正則表達式/\\d+/選擇了類名中的第一個數字實例，而您需要定位product_tag-pro-數字。

您還可以簡化排序邏輯，如

 var productContainer = jQuery("ul.products"); productContainer.children().sort(function(a, b) { return a.className.match(/product_tag-pro-(\\d+)/)[1] - b.className.match(/product_tag-pro-(\\d+)/)[1] }).appendTo(productContainer)

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="product-wrap"> <ul class="products"> <li class="first post-193 product type-product status-publish has-post-thumbnail product_cat-c-8-concrete product_cat-california-online-practice-exams product_tag-pro-7 taxable shipping-taxable purchasable product-type-simple product-cat-c-8-concrete product-cat-california-online-practice-exams product-tag-pro-7 instock"> <h3>Pro 7</h3> </li> <li class="post-277 product type-product status-publish has-post-thumbnail product_cat-c-53-swimming-pool product_cat-california-online-practice-exams product_tag-pro-18 taxable shipping-taxable purchasable product-type-simple product-cat-c-53-swimming-pool product-cat-california-online-practice-exams product-tag-pro-18 instock"> <h3>Pro 18</h3> </li> <li class="post-197 product type-product status-publish has-post-thumbnail product_cat-c-9-drywall product_cat-california-online-practice-exams product_tag-pro-8 taxable shipping-taxable purchasable product-type-simple product-cat-c-9-drywall product-cat-california-online-practice-exams product-tag-pro-8 instock"> <h3>Pro 8</h3> </li> <li class="last post-284 product type-product status-publish has-post-thumbnail product_cat-c-54-ceramic-tile product_cat-california-online-practice-exams product_tag-pro-19 taxable shipping-taxable purchasable product-type-simple product-cat-c-54-ceramic-tile product-cat-california-online-practice-exams product-tag-pro-19 instock"> <h3>Pro 19</h3> </li> <li class="first post-202 product type-product status-publish has-post-thumbnail product_cat-c-10-electrical product_cat-california-online-practice-exams product_tag-pro-9 taxable shipping-taxable purchasable product-type-simple product-cat-c-10-electrical product-cat-california-online-practice-exams product-tag-pro-9 instock"> <h3>Pro 9</h3> </li> <li class="post-221 product type-product status-publish has-post-thumbnail product_cat-c-15-flooring-and-floor-covering product_cat-california-online-practice-exams product_tag-pro-10 taxable shipping-taxable purchasable product-type-simple product-cat-c-15-flooring-and-floor-covering product-cat-california-online-practice-exams product-tag-pro-10 instock"> <h3>Pro 10</h3> </li> <li class="post-230 product type-product status-publish has-post-thumbnail product_cat-c-20-heating-ventilating-and-ac product_cat-california-online-practice-exams product_tag-pro-11 taxable shipping-taxable purchasable product-type-simple product-cat-c-20-heating-ventilating-and-ac product-cat-california-online-practice-exams product-tag-pro-11 instock"> <h3>Pro 11</h3> </li> <li class="last post-60 product type-product status-publish has-post-thumbnail product_cat-california-contractor-law-and-business-exam-study-materials product_cat-california-online-practice-exams product_tag-pro-1 taxable shipping-taxable purchasable product-type-simple product-cat-california-contractor-law-and-business-exam-study-materials product-cat-california-online-practice-exams product-tag-pro-1 instock"> <h3>Pro 1</h3> </li> <li class="first post-243 product type-product status-publish has-post-thumbnail product_cat-c-27-landscaping product_cat-california-online-practice-exams product_tag-pro-12 taxable shipping-taxable purchasable product-type-simple product-cat-c-27-landscaping product-cat-california-online-practice-exams product-tag-pro-12 instock"> <h3>Pro 12</h3> </li> <li class="post-158 product type-product status-publish has-post-thumbnail product_cat-a-general-engineering product_cat-california-online-practice-exams product_tag-pro-3 taxable shipping-taxable purchasable product-type-simple product-cat-a-general-engineering product-cat-california-online-practice-exams product-tag-pro-3 instock"> <h3>Pro 3</h3> </li> <li class="post-250 product type-product status-publish has-post-thumbnail product_cat-c-29-masonry product_cat-california-online-practice-exams product_tag-pro-13 taxable shipping-taxable purchasable product-type-simple product-cat-c-29-masonry product-cat-california-online-practice-exams product-tag-pro-13 instock"> <h3>Pro 13</h3> </li> <li class="last post-168 product type-product status-publish has-post-thumbnail product_cat-b-general-building product_cat-california-online-practice-exams product_tag-pro-2 taxable shipping-taxable purchasable product-type-simple product-cat-b-general-building product-cat-california-online-practice-exams product-tag-pro-2 instock"> <h3>Pro 2</h3> </li> <li class="first post-258 product type-product status-publish has-post-thumbnail product_cat-c-33-painting-and-decorating product_cat-california-online-practice-exams product_tag-pro-14 taxable shipping-taxable purchasable product-type-simple product-cat-c-33-painting-and-decorating product-cat-california-online-practice-exams product-tag-pro-14 instock"> <h3>Pro 14</h3> </li> <li class="post-176 product type-product status-publish has-post-thumbnail product_cat-c-5-framing-and-rough-carpentry product_cat-california-online-practice-exams product_tag-pro-4 taxable shipping-taxable purchasable product-type-simple product-cat-c-5-framing-and-rough-carpentry product-cat-california-online-practice-exams product-tag-pro-4 instock"> <h3>Pro 4</h3> </li> <li class="post-262 product type-product status-publish has-post-thumbnail product_cat-c-36-plumbing product_cat-california-online-practice-exams product_tag-pro-15 taxable shipping-taxable purchasable product-type-simple product-cat-c-36-plumbing product-cat-california-online-practice-exams product-tag-pro-15 instock"> <h3>Pro 15</h3> </li> <li class="last post-181 product type-product status-publish has-post-thumbnail product_cat-c-6-cabinet-millwork-and-finished-carpentry product_cat-california-online-practice-exams product_tag-pro-5 taxable shipping-taxable purchasable product-type-simple product-cat-c-6-cabinet-millwork-and-finished-carpentry product-cat-california-online-practice-exams product-tag-pro-5 instock"> <h3>Pro 5</h3> </li> <li class="first post-268 product type-product status-publish has-post-thumbnail product_cat-c-39-roofing product_cat-california-online-practice-exams product_tag-pro-16 taxable shipping-taxable purchasable product-type-simple product-cat-c-39-roofing product-cat-california-online-practice-exams product-tag-pro-16 instock"> <h3>Pro 16</h3> </li> <li class="post-186 product type-product status-publish has-post-thumbnail product_cat-c-7-low-voltage product_cat-california-online-practice-exams product_tag-pro-6 taxable shipping-taxable purchasable product-type-simple product-cat-c-7-low-voltage product-cat-california-online-practice-exams product-tag-pro-6 instock"> <h3>Pro 6</h3> </li> <li class="post-273 product type-product status-publish has-post-thumbnail product_cat-c-46-solar-contractor product_cat-california-online-practice-exams product_tag-pro-17 taxable shipping-taxable purchasable product-type-simple product-cat-c-46-solar-contractor product-cat-california-online-practice-exams product-tag-pro-17 instock"> <h3>Pro 17</h3> </li> </ul> </div>

Answer 2

嘗試使用 jQuery 自己的原生排序方法，對於可以使用的數字

numbers.sort(function(a, b){return a-b});

 var productContainer = $('.product-wrap').find('ul.products'); // get the container for the lines var lines = productContainer.find('li'); // get all the lines var numbers = []; // set up an empty number array lines.each(function(){ // split off the number between 'product_tag-pro-' and the following space, if there is one, and add it to our empty number array numbers.push(parseInt($(this).attr('class').split('product_tag-pro-')[1].split(' ')[0])) }); var sorted = numbers.sort(function(a, b){return ab}); // sort the numbers $.each(sorted, function(){ productContainer.append($('.product_tag-pro-' + this)); // sort the array in turn });

 h1, h2, h3, h4, h5, h6{ font-weight:normal; margin:0; font-size:16px;} .product-wrap{ margin:0px auto; width:960px;} .products{ list-style:none; border:1px solid #000; padding:0; margin:0;} .products li{ border-bottom:1px solid #000; padding:0 10px;} .products li:last-child{ border-bottom:0px none;}

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="product-wrap"> <ul class="products"> <li class="first post-193 product type-product status-publish has-post-thumbnail product_cat-c-8-concrete product_cat-california-online-practice-exams product_tag-pro-7 taxable shipping-taxable purchasable product-type-simple product-cat-c-8-concrete product-cat-california-online-practice-exams product-tag-pro-7 instock"> <h3>Pro 7</h3> </li> <li class="post-277 product type-product status-publish has-post-thumbnail product_cat-c-53-swimming-pool product_cat-california-online-practice-exams product_tag-pro-18 taxable shipping-taxable purchasable product-type-simple product-cat-c-53-swimming-pool product-cat-california-online-practice-exams product-tag-pro-18 instock"> <h3>Pro 18</h3> </li> <li class="post-197 product type-product status-publish has-post-thumbnail product_cat-c-9-drywall product_cat-california-online-practice-exams product_tag-pro-8 taxable shipping-taxable purchasable product-type-simple product-cat-c-9-drywall product-cat-california-online-practice-exams product-tag-pro-8 instock"> <h3>Pro 8</h3> </li> <li class="last post-284 product type-product status-publish has-post-thumbnail product_cat-c-54-ceramic-tile product_cat-california-online-practice-exams product_tag-pro-19 taxable shipping-taxable purchasable product-type-simple product-cat-c-54-ceramic-tile product-cat-california-online-practice-exams product-tag-pro-19 instock"> <h3>Pro 19</h3> </li> <li class="first post-202 product type-product status-publish has-post-thumbnail product_cat-c-10-electrical product_cat-california-online-practice-exams product_tag-pro-9 taxable shipping-taxable purchasable product-type-simple product-cat-c-10-electrical product-cat-california-online-practice-exams product-tag-pro-9 instock"> <h3>Pro 9</h3> </li> <li class="post-221 product type-product status-publish has-post-thumbnail product_cat-c-15-flooring-and-floor-covering product_cat-california-online-practice-exams product_tag-pro-10 taxable shipping-taxable purchasable product-type-simple product-cat-c-15-flooring-and-floor-covering product-cat-california-online-practice-exams product-tag-pro-10 instock"> <h3>Pro 10</h3> </li> <li class="post-230 product type-product status-publish has-post-thumbnail product_cat-c-20-heating-ventilating-and-ac product_cat-california-online-practice-exams product_tag-pro-11 taxable shipping-taxable purchasable product-type-simple product-cat-c-20-heating-ventilating-and-ac product-cat-california-online-practice-exams product-tag-pro-11 instock"> <h3>Pro 11</h3> </li> <li class="last post-60 product type-product status-publish has-post-thumbnail product_cat-california-contractor-law-and-business-exam-study-materials product_cat-california-online-practice-exams product_tag-pro-1 taxable shipping-taxable purchasable product-type-simple product-cat-california-contractor-law-and-business-exam-study-materials product-cat-california-online-practice-exams product-tag-pro-1 instock"> <h3>Pro 1</h3> </li> <li class="first post-243 product type-product status-publish has-post-thumbnail product_cat-c-27-landscaping product_cat-california-online-practice-exams product_tag-pro-12 taxable shipping-taxable purchasable product-type-simple product-cat-c-27-landscaping product-cat-california-online-practice-exams product-tag-pro-12 instock"> <h3>Pro 12</h3> </li> <li class="post-158 product type-product status-publish has-post-thumbnail product_cat-a-general-engineering product_cat-california-online-practice-exams product_tag-pro-3 taxable shipping-taxable purchasable product-type-simple product-cat-a-general-engineering product-cat-california-online-practice-exams product-tag-pro-3 instock"> <h3>Pro 3</h3> </li> <li class="post-250 product type-product status-publish has-post-thumbnail product_cat-c-29-masonry product_cat-california-online-practice-exams product_tag-pro-13 taxable shipping-taxable purchasable product-type-simple product-cat-c-29-masonry product-cat-california-online-practice-exams product-tag-pro-13 instock"> <h3>Pro 13</h3> </li> <li class="last post-168 product type-product status-publish has-post-thumbnail product_cat-b-general-building product_cat-california-online-practice-exams product_tag-pro-2 taxable shipping-taxable purchasable product-type-simple product-cat-b-general-building product-cat-california-online-practice-exams product-tag-pro-2 instock"> <h3>Pro 2</h3> </li> <li class="first post-258 product type-product status-publish has-post-thumbnail product_cat-c-33-painting-and-decorating product_cat-california-online-practice-exams product_tag-pro-14 taxable shipping-taxable purchasable product-type-simple product-cat-c-33-painting-and-decorating product-cat-california-online-practice-exams product-tag-pro-14 instock"> <h3>Pro 14</h3> </li> <li class="post-176 product type-product status-publish has-post-thumbnail product_cat-c-5-framing-and-rough-carpentry product_cat-california-online-practice-exams product_tag-pro-4 taxable shipping-taxable purchasable product-type-simple product-cat-c-5-framing-and-rough-carpentry product-cat-california-online-practice-exams product-tag-pro-4 instock"> <h3>Pro 4</h3> </li> <li class="post-262 product type-product status-publish has-post-thumbnail product_cat-c-36-plumbing product_cat-california-online-practice-exams product_tag-pro-15 taxable shipping-taxable purchasable product-type-simple product-cat-c-36-plumbing product-cat-california-online-practice-exams product-tag-pro-15 instock"> <h3>Pro 15</h3> </li> <li class="last post-181 product type-product status-publish has-post-thumbnail product_cat-c-6-cabinet-millwork-and-finished-carpentry product_cat-california-online-practice-exams product_tag-pro-5 taxable shipping-taxable purchasable product-type-simple product-cat-c-6-cabinet-millwork-and-finished-carpentry product-cat-california-online-practice-exams product-tag-pro-5 instock"> <h3>Pro 5</h3> </li> <li class="first post-268 product type-product status-publish has-post-thumbnail product_cat-c-39-roofing product_cat-california-online-practice-exams product_tag-pro-16 taxable shipping-taxable purchasable product-type-simple product-cat-c-39-roofing product-cat-california-online-practice-exams product-tag-pro-16 instock"> <h3>Pro 16</h3> </li> <li class="post-186 product type-product status-publish has-post-thumbnail product_cat-c-7-low-voltage product_cat-california-online-practice-exams product_tag-pro-6 taxable shipping-taxable purchasable product-type-simple product-cat-c-7-low-voltage product-cat-california-online-practice-exams product-tag-pro-6 instock"> <h3>Pro 6</h3> </li> <li class="post-273 product type-product status-publish has-post-thumbnail product_cat-c-46-solar-contractor product_cat-california-online-practice-exams product_tag-pro-17 taxable shipping-taxable purchasable product-type-simple product-cat-c-46-solar-contractor product-cat-california-online-practice-exams product-tag-pro-17 instock"> <h3>Pro 17</h3> </li> </ul> </div>