We Keep Coding

WordPress - jQuery function to multiple elements with same class/id

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');
}
});

How to replace all id from href?

I have the following markup
<div class = "general">
<div id ="custom"></div>
</div>
How to change id = "custom" in all <div> with class="general" from href on page using jQuery?

You can try this:
$("div.general").each(function() {
$(this).children("div#custom").text($(this).children("a").attr("href"));
});
If I understand you correctly, you want to iterate through all div.generals, and change the text of each child div#custom to the href of the child a.
See a working example on JSfiddle.
Also, another tip is to avoid using multiple elements with the same id. In your code you have a <div> with id="custom". You also say that the div.general appears multiple times — therefore, the id "custom" will appear multiple times. This is bad practice. I suggest that you change id to class.

You need to loop through all div.general and replace the id attribute of div#custom to whatever is there as the anchors href property. The following code will work:
$(".general").each(function(){
$(this).find("#custom").attr("id", $(this).find("a").attr("href").replace("#", ""));
})
Here the .find() will dig out elements from any depth inside the parent. If you are sure about the DOM position of the elements, you can change the .find() to .children()

How to get inner html based on attribute Id

I have the attibute Id.
In console when I type in the following jquery command:
$('#LocationRadioButtons a')
I get the following output
[<a id=​"4" href=​"#">Test​</a>​, <a id=​"5" href=​"#">Test1​</a>​, <a id=​"6" href=​"#">test2​</a>​]
Which is an array
If I type in the following jquery command:
$('#LocationRadioButtons a').first();
It will return the first element in that array:
Test​​
How do I return an element based on it's Id, and return its innerHTML. For example id = 5 innerHTML is test1,
Cheers

You can get the html by using html()
You can use
$('#LocationRadioButtons #5').html();
Based off your markup you can actually simply use
$('#5').html();
PS: I'd refrain from having ids start with a number. HTML4 doesn't like this.

while Id is unique for this element you can directly use id to get html
$('#5').html();

Try this,
$('#LocationRadioButtons a[id$="5"]').text();

an id is unique so you can just use the id selector to select an element with a specific id like this:
$('#5').html();

Try this:
As you already have the elements id, just do
$('#5').html();
Will alert Test1
jquery each() loop is useful when you don't have a selector and you want to parse through each element to check for certain condition.
$('#LocationRadioButtons a').each(function(index, value){
var myattr = $(this).attr('id');
if(myattr=='5') {
alert( $(this).html() );
}
});

Getting previous element of given in dom model

I have list of elements on my page
input
input
span
input
span
etc
I want to select each input that sits before each span, and after do, whatever i will have to. Is there any available ways to do that?

Use prev() to select the previous input of any given span:
$(this).prev("input");
If you're trying to select all previous inputs of all spans in 1 selector try this:
​$("span").prev("input");
http://jsfiddle.net/6hPRa/1/
$("span").prev("input").css("background-color", "pink");​

You have to use .prev()
ex :
$('span').prev("input") //this is input element

Use .parent() or .parents('.selector').first()
jQuery('.given').parent();
OR without jQuery
var el = document.getElementById('id');
el.parentNode...
AHH, previous-element...
Ok, now you have an answer.
Further there is a method
.siblings()
If you want the prev-prev element do so
jQuery('.given').prev().prev();

It's not that easy to define which one should be the first, I suggest go with set tabindex for each of them, and then with that using that as a selector you can always easily grab the previous one or next one

error selecting div element with a particular id - beginner at jQuery, javascript

I am playing around with selecting elements in the DOM using jQuery, and I tried the following:
$(document).ready(function() {
$("a").toggle(function(){
$("div[#id=SomeID]").hide('slow');
},function(){
$("div[#id=SomeID]").show('fast');
});
});
And in the html source, I do have this section:
<div id="SomeID">
<!-- div code -->
</div>
However, when I click on an anchor tag I get the following error:
Syntax error, unrecognized expression: div[#id=SomeID]
Any ideas as to what is going wrong here? I'm a beginner at jQuery and javaScript, so would appreciate any help.

To select an element by its id in jQuery, use the same syntax as in CSS:
$('#someID');
To use the attribute-equals selector format then use:
$('div[id="someID"]');
References:
jQuery selectors.

You are using the Wrong selector.. Id has to be prepended with a #
These are valid
$("#SomeID").hide('slow'); // element with id SomeID , can be any element
$("div#SomeID").hide('slow'); // Div with id SomeID
$("div[id=SomeID]").hide('slow'); // Div with id SomeID
$("div[id^=SomeID]").hide('slow'); // Div id that starts with SomeID
$("div[id*=SomeID]").hide('slow'); // Div id that has SomeID in its id attribute
$("div[id=SomeID]").hide('slow'); // Div id that ends with SomeID