We Keep Coding

jquery function on same classes

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

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/

Calculating sum only for relevant row

So I have problem which I can't solve for hours now..
When I press on button "Pridėti prekę" then one row is dynamically added to the table and when I write numbers in "Kiekis" and "Kaina" columns nothing happens in "Suma" column (It only happens to dynamically added row).
Piece of jQuery:
$(document).on('keyup', '#quantity, #price', function() {
$('#total').val(($('#quantity').val() * $('#price').val()).toFixed(2));
});
Please look at JSFiddle how is "working" my code:
https://jsfiddle.net/w5qz5exe/7/
Thanks for help in advance!
P.S I tried to change from div ID total, to div class total, then it works, but it applies to all rows instead to relevant.

You were referencing everything with id's.
$(document).on('keyup', '.quantity, .price', function() {
var row = $(this).closest('tr');
var rowPrice = $(row).find('.price').val();
var rowQuantity = $(row).find('.quantity').val();
$(row).find('.total').val( (rowPrice * rowQuantity).toFixed(2) )
});
https://jsfiddle.net/w5qz5exe/12/

Your problem is the fact that the inputs are using id's instead of something else. When looking for the item in question the search stops on the first Id found.
This updated fiddle https://jsfiddle.net/w5qz5exe/11/ shows how it could be done with classes.
$(document).on('keyup', '.quantity, .price', function(e) {
var $parent = $(e.target).parents('tr'),
$total = $parent.find('.total'),
$quantity = $parent.find('.quantity'),
$price = $parent.find('.price');
$total.val(($quantity.val() * $price.val()).toFixed(2));
});
In addition to the above remove all Id's from the inputs and change them to classes instead.

jQuery - Not iterating correctly? (Too long to execute)

I have a snippet I've developed to increase the size of an image and take the td to the right of the image and drop it beneath.
However - it's taking a good few seconds, from the time it takes to remove the TD to add it in, and it makes the page rendering/paint/flow look terrible.
Please see the video below for a better understanding of what is happening.
http://screencast.com/t/RQdBiNyGkEm
Please also see my code snippet below;
<script>
$(document).ready(function() {
$('html').addClass('js');
$('.description').show();
// add a td for initial page load of cart.
$("table#shopping-cart-items tr td.image").after($('<td id="clearSpacePageLoad"></td>'));
// take content from right - and drop it beneath the image
$('#shopping-cart-items > tbody > tr').each(function() {
var desc = $('td.description', this).html()
$('td.description', this).remove();
$('td.image', this).append(desc);
});
});
</script>
<script>
//When selecting a delivery method - everything resets due to AJAX.
$(document).ready(function() {
// Use .live() in stead of .on() since jQuery is < 1.9
// On select of delivery method do the following
$('.shippingOpt').live('click', function() {
// Wait for ALL ajax requests on page (Past and future) to execute BEFORE executing the following
$(document).ajaxStop(function() {
// Repeat the same code as initial page load.
$('img.item-img').each(function() {
var str = $(this).attr('src'),
arr = str.split("?");
query = "?hei=200&wid=200&op_sharpen=1"
$(this).attr('src', arr[0] + query);
});
$('#shopping-cart-items > tbody > tr').each(function() {
var desc = $('td.description', this).html()
$('td.image', this).append(desc);
$('td.description', this).remove();
});
// If ID of 'clearSpaceOnClick' exists don't add another td, if it doesn't - add it!
if ($('#clearSpaceOnClick').length) {} else {
$("table#shopping-cart-items tr td.image").after($('<td id="clearSpaceOnClick"></td>'));
}
});
});
});
</script>
<style>
.checkoutBasket table.cart-container td.image img {
width: 200px;
height: auto;
}
#clearSpace {
padding: 0 0 0 15px;
}
</style>

From looking at the video, you are almost certainly injecting an additional td element and now there are more tds on the row than there are columns in your table. You should be able to see an issue if you inspect element.
Off hand, I would look very closely at the logic related to the line below but you dont give us your html so we cant know for sure:
$("table#shopping-cart-items tr td.image").after($('<td id="clearSpaceOnClick"></td>'));

If there are multiple td.image in table#shopping-cart-items then you should not append an element with an ID (as ID's must be unique), which you're doing in 2 places in your code.
It looks like you might be selecting an (already active) shipping option. In that case ajaxstop may be delaying things if there are any outstanding ajax requests.
Also, jQuery .on has been available since v1.7, not 1.9

Select hidden elements and manipulate them with jQuery

Within a div wrapper with a class of "section", I have dozens of HTML elements repeated across the page that look like this:
<div class="section">
<div class="article"></div>
<div class="article"></div>
<div class="article"></div>
</div>
And each contains certain information inside. Now, what I'm trying to do is once the page loads, show only the first 5, hide the rest in a new div inserted with jQuery, and when this new div is clicked it will display the next five , and then the next five on click again, and so on until the end. The idea is that this new div will function as a button that will always be positioned at the end of the page and will respond to these orders I just mentioned. So far I've got this down:
$('.section').each(function () {
var $this = $(this),
$allArticles = $this.find('.article');
if ($allArticles.length > 5) {
$('<div/>').addClass('hidden-articles').appendTo(this).append($allArticles.slice(5));
$('.hidden-articles .article').hide();
}
});
And that hides all but the first five. But now for the rest of the process, I can't get it to work. I don't seem to be able to select properly those hidden div with class "article" and manipulate them to function the way I described above. I would appreciate it a lot if someone more experienced with jQuery could guide me in the right direction and maybe offer a snippet. Many thanks in advance!

You can use the :hidden and :lt selectors to get the functionality you are looking for..
$('.section').each(function() {
var $this = $(this),
$allArticles = $this.find('.article');
if ($allArticles.length > 5) {
$('<div/>').addClass('hidden-articles')
.appendTo(this).append($allArticles.slice(5));
$this.find('.hidden-articles .article').hide();
}
});
$('#show').on('click',function() {
var $hidden = $('.hidden-articles .article:hidden:lt(5)');
$hidden.show();
});​
UPDATE
// If one one element to search
var elem = '.section' ;
hideArticles(elem);
// If Multiple Elements on the page...
$('.section').each(function() {
hideArticles(this);
});
$('#show').on('click', function() {
var $hidden = $('.hidden-articles .article:hidden:lt(5)');
$hidden.show();
});
function hideArticles(elem) {
var $this = $(elem),
$allArticles = $this.find('.article');
if ($allArticles.length > 5) {
$('<div/>').addClass('hidden-articles')
.appendTo(this).append($allArticles.slice(5));
$this.find('.hidden-articles .article').hide();
}
}​
Check Fiddle

Hide a table row with filtering jquery

I have the following example http://jsfiddle.net/zidski/MxqRu/1/
When you click on 2010 I need valuation to disappear with the list items.
Here is the code which I am using to do this:
$("#yearfilter a").live("click", function(e) {
e.preventDefault();
//var v = $(this).val();
var v = $(this).attr("data-value");
if(v.length > 0) {
$('tr.reports').show();
$('tr.reports ul').hide();
$('tr.reports ul.year-'+v).show();
$('tr.reports').each(function() {
if($('ul:visible', this).size() == 0) {
$(this).hide();
}
});
} else {
$('tr.reports').show();
$('tr.reports ul').show();
}
});

I have done it in my project something like this:
function toggleRow(row_id) {
row_selector = "#row_" + row_id;
$(row_selector).toggleClass("shown hidden")
}
Then in the CSS:
.hidden {display:none;}
.shown {}
Then in the HTML I have alternating table rows, where the odd rows act as headings for the content in the even rows. Clicking an odd row toggles the visibility of the corresponding even row.
...
<tr onclick="toggleRow(17)">...</tr>
<tr class="hidden" id="row_17">...</tr>
...

Give each tr an ID something like id="row_2010" then look for that and hide the whole entire row at once.
UPDATE
I would strongly suggest not using so many tables and use more classes to classify your data structure. It would help your javascript be much more clean, concise and function easier.
UPDATE
I adjusted all your javacsript and some of your html. Here is a fully working example jsFiddle Demo