jquery function on same classes

Question

I have a page where I have a table with a class. This table sometimes occurs multiple times on the page. I need to do the same jquery function on each instance. How do I achieve that with jquery...???

Here is my jquery:

jQuery(window).load(function () { 
    if(jQuery('.ezfc-summary-table tr:eq(2) td:eq(1)').text()=='1 layer'){
    jQuery('.ezfc-summary-table tr:eq(5)').hide();
    jQuery('.ezfc-summary-table tr:eq(6)').hide();
    jQuery('.ezfc-summary-table tr:eq(8)').hide();
}
});

@devlin carnate - i'm trying to do another thing, which is to take the text from one of the td's and append it to another class (product-title), which also appears multiple times. Here is what i have tried, but it only takes the text from the first td it finds, and appends it to all the following classes.

$(document).ready(function() {
  $('.ezfc-summary-table').each(function(i, obj) {
    var table = $(this);
    if (table.find('tr').eq(2).find('td').eq(1).text() == '1 layer') {
      table.find('tr').eq(5).hide();
      table.find('tr').eq(6).hide();
      table.find('tr').eq(8).hide();
var getpartname = $('.ezfc-summary-table tr:eq(0) td:eq(1)').text();
    $('.product-title').append('<span style="padding-left: 5px;">'+getpartname+'</span>');
    }
  });
});

Could you help me solve this problem also...???

Thanks in advance

So you have multiple different class names that you want to hide? — Loaf, Jan 13 '17 at 22:22
Possible duplicate of [jQuery to loop through elements with the same class](http://stackoverflow.com/questions/4735342/jquery-to-loop-through-elements-with-the-same-class) — devlin carnate, Jan 13 '17 at 22:23
Using `.load()` to define an event handler is deprecated, use `.on('load', ...)' or `$(document).ready(...)` — Barmar, Jan 13 '17 at 22:24
Maybe you want all the elements with this selector: `all_things = $('.ezfc-summary-table tr:eq(2) td:eq(1)');` then you can just loop through them if the length is greater than 1 — Radmation, Jan 13 '17 at 22:25
just to be clear, Do you want to check each row td text, The one which contains ' layer 1 ' should remain visible and the remaining rows dissapear from display. If i'm wrong please provide a code snippet or a js-fiddle to showcase your problem. — Faical ARAB, Jan 13 '17 at 22:49

score 0 · Answer 1 · answered Jan 13 '17 at 22:57

0

You can iterate over the class assigned to the tables using jQuery $.each() and hide the rows based on whether the '1 layer' text condition is met:

$(document).ready(function() {
  $('.ezfc-summary-table').each(function(i, obj) {
    var table = $(this);
    if (table.find('tr').eq(2).find('td').eq(1).text() == '1 layer') {
      table.find('tr').eq(5).hide();
      table.find('tr').eq(6).hide();
      table.find('tr').eq(8).hide();
    }
  });
});

Here is a Fiddle Demo : https://jsfiddle.net/zephyr_hex/f45umhkp/2/

answered Jan 13 '17 at 22:57

devlin carnate

8,309
7
48
82

Exactly what i needed. Thanks a lot. – PCB-Tech Jan 14 '17 at 09:46
@PCB-Tech : if this answers your question, you can mark it as the solution using the checkmark icon near the top of my answer. – devlin carnate Jan 16 '17 at 16:33
could you please take a look at my updated question, thanks! – PCB-Tech Jan 17 '17 at 21:13
@PCB-Tech : Technically, you should open a new question. But, I'll give you a hint. It looks like you're making the same mistake as you originally did. My solution is looping through the tables and finding the rows. You should use syntax that is **relative** to the scope inside the each loop. `var partname = table.find('tr').eq(0).find('td').eq(1).text();`. You then need to append that to the **relative** element with the `product-title` class. I don't know the structure of your HTML elements, so I'll leave that part to you to figure out. Think through what my solution above is doing. – devlin carnate Jan 17 '17 at 21:29

jquery function on same classes

1 Answers1