jQuery working with each function

Question

I have:

<tr>
    <td>Blah Blah<td>
    <td>Blah Blah<td>
    <td class="product_1">1,000</td>
</tr>
<tr>
    <td>Blah Blah<td>
    <td>Blah Blah<td>
    <td class="product_2">1,200</td>
</tr>
<tr>
    <td>Blah Blah<td>
    <td>Blah Blah<td>
    <td class="product_2">1,400</td>
</tr>
<tr>
    <td>Blah Blah<td>
    <td>Blah Blah<td>
    <td class="product_1">1,600</td>
</tr>
<tr>
    <td>Blah Blah<td>
    <td>Blah Blah<td>
    <td class="product_1">1,800</td>
</tr>

Each tr represents a product detail row, and in the class of the latest td which is for the product price you can see the product id like product_1 which 1 is the id.

Now in the above example I want to show only 1 price for each product, the cheapest one! So after doing something on the above, I need to have:

<tr>
    <td>Blah Blah<td>
    <td>Blah Blah<td>
    <td class="product_1">1,000</td>
</tr>
<tr>
    <td>Blah Blah<td>
    <td>Blah Blah<td>
    <td class="product_2">1,200</td>
</tr>

I assume I need to use jQuery each function like this:

$('td[class^="product_"]').each(function(){
    var price = this.text();
    // what should happen here?
    // here somehow I need to check other trs and see if it's the cheapest one,
    // then hidden all others...
})

I appreciate any kind of help

lord jesus, if you people really need to use tables, at least use them correctly. each freakin tr needs at least one freakin td. — Alex
– Alex, Commented Aug 5, 2014 at 15:56
dont you think this information might be important for how your jquery code needs to look like? — Alex
– Alex, Commented Aug 5, 2014 at 15:59
@Alex question edited to look like the real example, any ideas...? — behz4d
– behz4d, Commented Aug 5, 2014 at 16:07

Ram · Accepted Answer · 2014-08-05 17:11:19Z

2

You can filter the elements using the filter method:

var $td = $('td[class^="product_"]');

$td.each(function () {
    $td.filter(':visible')
       .filter('.' + this.className)
       .hide()
       .sort(function (a, b) {
           return +a.textContent > +b.textContent;
       }).first().show();
});

Since you can change the markup, I'd suggest using the data-* attributes instead, something like:

Example row:

<tr data-amount="1000" data-cat="1">
    <td>Blah Blah</td>
    <td>Blah Blah</td>
    <td class="whatever">1,000 ...</td>
</tr>

jQuery:

var $tr = $('tr[data-cat]');

$tr.each(function () {
    var cat = $(this).data('cat');
    $tr.filter(':visible')
       .filter('[data-cat="' + cat + '"]')
       .hide()
       .sort(function (a, b) {
           return +$(a).data('amount') > +$(b).data('amount')
       }).first().show();
});

For showing more than 1 cheap item in each category you can try the following code:

var $tr = $('tr[data-cat]'), 
    filtered = [];

$tr.each(function () {
    var cat = $(this).data('cat');

    if ($.inArray(cat, filtered) > -1) return;

    filtered.push(cat);

    var $set = $tr.filter('[data-cat="' + cat + '"]');

    var min = Math.min.apply(Math, $set.map(function() {
            return +$(this).data('amount');
    }).get());

    $set.hide().filter('[data-amount="' + min + '"]').show()

});

edited Aug 5, 2014 at 17:11

answered Aug 5, 2014 at 15:59

Ram

145k16 gold badges174 silver badges201 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

behz4d Over a year ago

I have edited my question with the real example code, how your code must be edited to work for this new one? ty

behz4d Over a year ago

it should be also noted that the prices are echod with number_format() php function so they have comma in them...

Ram Over a year ago

@behz4d Using attribute starts with selector for class attributes/filtering is a bad idea, why don't you use data-* attributes? Can you modify the markup?

behz4d Over a year ago

one more question, why it's bad? I'm using it everywhere

Ram Over a year ago

@behz4d class can be a space-separated value, attribute starts with is not a good option for dealing with classes, if you add another class name at the beginning then your selectors won't work. Apart from that these selectors are expensive and non-efficient.

|

Collectives™ on Stack Overflow

jQuery working with each function

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related