We Keep Coding

jQuery: accessing a single instance of a class in a dynamically created table

I have many auto-generated table and those tables have a <span class="productNumber"> element in the thead that shows the number of products in the table. (right now this is done in php via <?php count($products); ?>).
I wrote a filter to help users to navigate those tables. The filter allows the user to choose a product category and all tr elements that don't have this product category get the Bootstrap class hidden.
I now want to use jQuery to count the actually visible elements for each table and display the number of elements that are actually visible.
My current approach is this:
$('table').each(function(){
let counter = 0;
$('tr', this).each(function(){
if (this.hasClass("hidden")) {
counter++;
};
});
$('.productNumber').html(counter);
})
The problem is that this overwrites all .productNumber elements with the same value (the number of visible products in the very last table).
I tried modifying it in various ways ($('.productNumber', this), $('.productNumber')[0], etc.), but wasn't able to write only to the current table's .productNumber.

The easy way to do this:
$("table").each(function(){
var count = $(this).find("tr:not([class*='hidden'])").size();
$(this).find(".productNumber").first().html(count);
});
English Translation:
For each table:
Get the number of tr's that don't have "hidden" defined in
it's class attribute and assign to the count variable.
Find the first ".productNumber" cell in the table and set its
content

use this selector
$(this).children('.productNumber').html(counter);

My proof of concept. https://jsfiddle.net/dewwwald/8gn5jdsL/1/
The issue is solved by specifying the this to the product number lookup.
assuming productNumber is inside the tr. Also as you describe your requirements I read that this.hasClass("hidden") should have a ! so !this.hasClass("hidden").
$('table').each(function(){
let _this = this;
_this.counter = 0;
$('tr', _this).each(function(){
if (!this.hasClass("hidden")) {
_this.counter++;
};
$('.productNumber', this).html(_this.counter);
});
})

Put value of buttons into array

I currently have about a dozen html buttons on a page, all with a unique value attribute assigned to them.
Firstly, I want to be able to get the values of these buttons and assign them into an array. Here is my code:
var myArray = [];
$("#buttonID").each(function(){
myArray.push($(this).attr("value"));
});
This works, however only takes the value from the first button, and then ignores the rest, despite them all have the same ID. Have I done something wrong with my .each() ?
Once I have solved that, I would like to then modify the above to only add values of those buttons with ".active" classes on them. i.e a user has selected them.

Your selector represents an ID hence the #this why it picks only one because ID's are supposed to be unique, you need to pick them by class name like .className after assigning this class name to all of your buttons
have a loonk at this http://www.w3schools.com/jquery/jquery_ref_selectors.asp

Let's say you decided to use a common class for your buttons instead of an ID. Example:
<button class="my-class".......
There's a wonderful jQuery method that would put the values of all the button's with this class in an array like so:
var myArray = $('.my-class').map(function() {
return this.value;
})
.get();

How to select cell using jQuery id selector

I am getting ID of table cell using the following Javascript
var tempCell = e.target.parentNode.id;
Now I have to append a table in tempCell using jQuery like that
var htmlToAppend = '<table id="tbleSelectApproovers"></table>';
$(???).append(htmlToAppend);
I am not sure how to write the syntax to use id for the purpose to add table in td. What to write in place of question mark to add table in tempCell

You have to give id to td in id selector. Before id you need to give #
$('#idoftd').append(htmlToAppend);
If you can get the element by e.target.parentNode then you can pass it to jQuery method to make jQuery object out of it.
$(e.target.parentNode).append(htmlToAppend);

use escaping rule from selector http://api.jquery.com/category/selectors/
$('#e\\.target\\.parentNode\\.id').append(htmlToAppend);
or
$('[id="e.target.parentNode.id"]').append(htmlToAppend);
update:
$('#'+e.target.parentNode.id).append(htmlToAppend);
or
$('#'+tempCell ).append(htmlToAppend)

From the looks of it you are trying to append the element to the current elements parent so
var htmlToAppend = '<table id="tbleSelectApproovers"></table>';
$(e.target.parentNode).append(htmlToAppend);

easy way : keep an id or class attribute to the table cell like for example say
<td id="tablecellid">
now if you want to append anything keep it in a variable for readability
var data = ''
and do the following
$("#tablecellid").append(data);

Assuming your cell looks like this:
<td id='myfavcell'></td>
you would call
$('#myfavcell').append(htmlToAppend);
as jquery uses the css selector type (#) for locating element IDs.

How to return HtmlCollection from Jquery selection

I have a jquery selection like this:
elements= $($('#mytab').find('form').attr('elements')).not('button');
// access elements by name
elements['id']=1;
which is not working obviously :(
I need the jquery to return the collection as HtmlCollection e.g
$('#mytab').find('form').attr('elements')
My qeuestion is, is there any function available e.g like toArray() etc to
return the collection as HtmlCollection, instead of jquery array/ object collection ?
My main objective is to access form elements by name not by index e.g
elements['id'], elements['name']
Html Form elements
Lots of confusion around elements. elements is attribute of html form object which is collection of all the elements in the form
Here is a JSfiddle for this.

elements is a property not an attribute, you should use prop method instead:
var elements = $('#mytab').find('form').prop('elements');
or:
var elements = $('#mytab').find('form')[0].elements;
Well, if you want to filter input elements, you can use get method, there is no need to use elements property:
var elements = $('#mytab form input').get();
http://api.jquery.com/get/

Yup, there is:
$.makeArray($('div'));
This returns a array of all div elements on the page. Obviously, you can use any selector you want.
To get a array of elements, by their name, just use native JS:
document.getElementsByName('myFormElementName');

How to get attributes of container in jquery?

How can I get attributes values from an container using jquery ?
For example:
I have container div as:
<div id = "zone-2fPromotion-2f" class = "promotion">
here how can I get attribute id value using jquery and than how can I trim the value to get component information ?
update : how can i get attribute values ?
UPDATE: If I have multiple components on page with same div information than how would I know what attribute value is for which component ?
Thanks.

First, that seems to be a ridiculously long ID -- I'm sure it could be made much shorter while still retaining its uniqueness.
Anyway, on to the answer: First you need a way of accessing your "container" div. Typically, one might use a class or ID to get an element. For example, you could "select" this div with the following call to jQuery:
var container = jQuery('#zone-3a...'); // Fill in ... with really long ID
But, since you're asking how to retrieve the ID, I'm presuming that selecting it via the ID is not an option. You could also select it using the class, although it's not guarenteed to be the only element on the page with that class:
var container = jQuery('.promotion');
There are other ways to narrow down the search, such as:
jQuery('div.promotion');
jQuery('div.promotion:first');
Once you have a reference to your "container", you can retrieve the ID like so:
container.attr('id'); // => zone-3a...
// or:
container[0].id; // => zone-3a...

So assuming your div looks like this.
<div id="foo"/>
You could get the ID attribute by using the attr method.
$("div").attr("id);
That assumes that you only have one div on the page. Not really sure what component information you are looking to get?

You read node attributes with the attr() method.
var id = $( '.promotion' ).attr( 'id' );
In terms of parsing that ID for any other arbitrary information, I can't say since it looks like you're using some sort of proprietary format of which I have no knowledge.

loop thru and get all divs with the class promotion and get the id of each...
$('div.promotion').each(function(){
var attr = $(this).attr('id'); // or whatever attribute
});
or single
var myDivClass = $('zone-3a-2f-2f-2fPortal-2fPages-2fHome-2fZones-2fLeft-2f-7ccomponent-3a-2f-2f-2fSpm-2fComponents-2fPromotion-2f').attr('class');
or another single
var myDivID = $('.promotion').attr('id');