Reputation: 300

Sorting in jQuery according to defined class

Here is my jsFiddle code.

Please help me out of this. I want sort it in ascending order according to the class names product_tag-pro-1, product_tag-pro-2 ... etc.. But the lists are arranging according to the post-* numbers.

I could not find out the solution.

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/

Upvotes: 2

Answers (2)

omikes

Reputation: 8513

Try jQuery's own native sort method, for numbers you can use

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 a-b}); // 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>

Upvotes: 0

Arun P Johny

Reputation: 388326

The problem is your regex /\d+/ which selects the first instance of digits in your classname, instead you need to target digits that follows product_tag-pro-.

You can also simplify the sorting logic like

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>

Upvotes: 1

Sorting in jQuery according to defined class

Answers (2)

Related Questions