javascript - 根据定义的类在 jQuery 中排序

Question

这是我的 jsFiddle 代码。

请帮我解决这个问题。 我想根据类名 product_tag-pro-1、product_tag-pro-2 ... 等按升序排序。但列表是根据后*号排列的。

我找不到解决方案。

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>