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();
Related
The code below is adding a placeholder to my #e_newsletter_email div. However I have added an additional signup box for the e-newsletter and the placeholder is not showing up on the second one. Is there a way to apply this code to work on both signup boxes?
jQuery(function($) {
$('#e_newsletter_email').attr( 'placeholder', 'You Email Address' );
});
I have tried to add this code to to force the id to add a class but again this only works on the first id. Any other thoughts?
jQuery(function($) {
$('#e_newsletter_email').addClass('e_newsletter_email');
});
Thanks
An Id can only be used once. Use classes for elements that do not need to be uniquely identified.
After some help from #mark.hch we where able to figure out how to create a workaround. Below is the final code:
<script type="text/javascript">
jQuery(function($) {
$('input').each(function() { if($(this).attr('id') == 'e_newsletter_email') { $(this).addClass('e_newsletter_email_custom'); } });
});
jQuery(function($) {
$('.e_newsletter_email_custom').attr( 'placeholder', 'You Email Address' );
});
</script>
First we needed to loop through each id and add a new class to the e_newsletter_email (which was being used twice). Then once we added the class to the id we where able to update the original function to use class instead of id and everything worked perfectly!
The true answer to the question is to use a class instead of an ID for both fields. As mentioned in the comments, an ID should be unique to each element on a page. In this case, however, the elements only contained an ID and the question then becomes how to add a class to the elements so a future selector can grab them all (or both) to manipulate them.
Using the ID selector $('#e_newsletter_email') only selects one element (as jQuery assumes there is only one element with that ID). So we need a more general selector - in this case, both elements are inputs, so the selector $('input') should grab at least those elements.
Since there could be more inputs on the page than the ones in question, we then need to filter out the ones we want; in this case, we compare the ID attribute of the elements (since we know, even though they're supposed to be unique, two actually contain the same ID).
Grabbing the ID of the element will work even if there are multiple elements with the same ID ($(this).attr('id') will always display the element's assigned ID, even if not unique).
So the code becomes:
//loop through all inputs
$('input').each(function() {
//if the input currently iterating over has the ID in question
if$(this).attr('id') == 'e_newsletter_email') {
//add the class for the input
$(this).addClass('e_newsletter_email_custom');
}
});
I have the followings defined :
var excludedFiltersPanel = $("#excludedFiltersPanel");
var includedfiltersPanel = $("#includedfiltersPanel");
where *Panel is just a div.
in excludedFiltersPanel there are some div's with attribute data-iscorefilter="true" e.g. :
<div id="filterPanel-LastName" class="filterPanel" data-iscorefilter="true">
<Some Stuff here!>
</div>
I am trying to get them and move them to includedfiltersPanel:
It seems neither of these is a correct syntax:
excludedFiltersPanel.('[data-iscorefilter="true"]')
excludedFiltersPanel.$('[data-iscorefilter="true"]')
1.What is the correct syntax?
2.How do I append them to includedfiltersPanel? (I know how to append a single item, but not sure what is the common good practice here, e.g. using for loop or some JQuery magic)
Since excludedFiltersPanel there are some div's with attribute data-iscorefilter="true"
Use .find()
Description: Get the descendants of each element in the current set of matched elements, filtered by a selector, jQuery object, or element.
It would look like :
excludedFiltersPanel.find('[data-iscorefilter="true"]')
I have an element with an array id id="x[]" that vary depending on the number of elements that I have on a database. It's basically a x button to delete a certain table row in the database.
<div align="center" id="x[]" class="x">
<img src="x 2.png" alt=""></div>
Problem is, I don't know how to pass this id into the jQuery selector. I want to change the form action to delete the row and create an hidden input to get the paramater I need from another field with an array id id="codsinmov[]" with the same index as x[]. What I have so far is:
$(document).ready(function(){
for(var i=0; i<x.length; i++) {
$('#x[i]').click(function(){
var $hiddenInput = $('<input/>',{type:'hidden',id:codsinmovesse, name:codsinmovesse});
$hiddenInput.val($('#codsinmov[i]').val());
$hiddenInput.appendTo('#tabelaeditavel');
$('#form').get(0).setAttribute('action', 'deletemoviment.php');
$('#form').submit();
});
}
});
But it doesn't work.. So, any ideas? Sorry, I'm a beginner at jQuery. Thank you very much!
you can use
$("div[id^='x['").click(function(){
// write code here })
So this will execute on click of those ids of div which start from x.
So as per my understanding You need not to use for loop here rather use 'this' keyword and do what you want.
I hope it will help you.
If you want to add an eventListener to ALL elements you can simply do it like that
var $myButtons = $('.buttons');
That way the whole list of Elements are stored behind the variable $myButtons.
Now you can proceed as following:
$myButtons.on("click", function(event){
console.log(this); // this will print out the clicked element
});
This way every element with the class .buttons is clickable and accessable.
If you want to dynamically select a single element with jquery depending on some value you have to exclude your [i] from the string
for example like that $('element:nth-child('+[i]+')');
I have a table and I have multiple text boxes in a column.I am add rows to the table using jquery clone method
var row = $('#nameTable tbody>tr:last').clone(true);
Now I want to add ids to the text fields of the new row.
Any help?
Just add attribute id to that new row object.
$(row).find('input').attr("id","newId");
Docs of attr()
note: Considering only one input element is there in your new object. If multiple input elements are there, you have to loop on them and have assign individual id's to them, Since Id must be unique.
Try with this
var row = $('#nameTable tbody>tr:last').clone(true);
row.find("#someInput").attr("id","someInput_2");
Since you referring to text fields you can make use of this selector
$(row).find('input[type=text]').each(function(element) {
element.attr("id","newId");
})
For set multiple IDs use (be careful, because ID must be unique):
var row = $('#nameTable tbody>tr:last').clone(true);
row.find(':text').each(function () {
this.id = 'new_id' + Math.random();
});
I prefer access to ID via pure javascript instead of jquery http://jsperf.com/browser-diet-this-attr-id-vs-this-id/12
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');