I have problem with filter more identic id in the same page.
document.getElementById(val1).innerHTML=xmlhttp.responseText;
I have three the same <div id="name"></div> on one page. And only first div display content. I try with jQuery and filter... but I dont have progress.
The id selector is something to return one unique element (or none if not found). That's why you shouldn't use multiple ids - it will always return [at most] only one (the first).
Fix that fault by using classes or something.
If you really have to get multiple elements with the same id, you can do by using an attribute selector:
$('[id="name"]').html(xmlhttp.responseText);
// or
[].forEach(document.querySelectorAll('[id="name"]'), function(el) {
el.innerHTML = xmlhttp.responseText;
});
document.getElementById
return only first element that having the specified ID. Id should always be unique.
You can try with other attributes like class and then use
document.getElementsByClassName("myClass")
that will return all the elements of given class.
ids should be unique. You shouldn't have two or more elements on the same page with the same id. You can use class names to identify them, and those can definitely be the same. I don't know your code, but try using document.getElementsByClassName (not supported in IE8), or using jQuery to simplify what you are trying to do: $('.my_class_name').html(xmlhttp.responseText)
Related
I have a HTML page where many elements are dynamically inserted as the user requests. Each of these elements have an id attribute with some string plus a numeric id value plus another string.
Example: budget_budget_alive_elements_attributes_10_unit_value
And so I tried the following selector:
$("#budget_budget_alive_elements_attributes_\d+_unit_value");
But it unfortunately does not work.
Some person wrote an article of an extension to jQuery selector for fetching these kinds of ids but I had no luck with that, either.
Can you help me here? Given the constraints of the element's id values, how can I make a selector for them?
You'd better use class selector (by adding same class to these elements).
Else you have to use something like:
$("[id^='idbudget_budget_alive_elements_attributes']")
I just wanted a fast/easy/simple way to check for existing ID on a specific element (div in this case)..
Can't seem to find code sample for this..im using jquery but i dont think i need to do jquery on this one, just basic getElement.. but i need to isolate the search inside a div block.. because the id does exist in other elements on the page but i need to know if it exist in a specific area/div.
so instead of just
document.getElementById(target_id);
i need something like:
divName.getElementById(target_id);
or
$("document.divName").getElementById(target_id);
or
$(".divName").document.getElementById(target_id);
Can't seem to find something that works.
IDs are supposed to be unique and no two elements in page should have same id. You may search some element with some class in div with specific ID.
$('#divId .someClass')
or using find()
$('#divId').find('.someClass')
or using context, jQuery( selector [, context ] )
$('.someClass', $('#divId'))
var mySubDiv = myParentDiv.querySelector("#mySubDivId")
is equivalent to
var mySubDiv = document.querySelector("#myParentDivId #mySubDivId");
// don't forget the space : #myParentDiv#mySubDivId won't work
where querySelector and querySelectorAll are very useful functions, enough for me to avoid using jQuery : they accept any css selector
in real life, using the same Id for different DOM elements often happens.
id's should be unique, you can check for element using:
$(".your_parent_div").find("div#some_unique_id");
you can use it for the getElementsByTagName or ClassName, but ID is unique over document. so doesn't need to do that. better to use a special ID.
and in every id define as a element in javascript and you can just write id's name and use it, like this :
ID.style.color = red;
According to my understanding on your question, You have used two id's with same name when u execute, It takes only first ID so you are asking to take id from the specific div, well that is bad type of coding to use two id for same name instead go for class if want to use same name.
solution for your question is -this ->
var someDiv = document.getElementsByClassName("divName");
var someId = someDiv[0].getElementById("target_id");
I'm making a site, and the html is displayed through php with data fetched from a database.
I have a foreach() function, so all of the things displayed have the same DIV ID's.
It ends up being like 4 DIVs with the same ID (#content), so the PHP works fine, but I have a jQuery script and when I call the jQuery("#content").hide(); it only hides ONE of the DIV's not all of them, and I want it to hide all of them. Is there something else I have to do?
Thanks.
You should use a class (.class_name), not an id--only one DOM element may have a given ID, otherwise it's invalid HTML. It's reasonable for an ID selector to return only a single element.
IDs on elements on a page should be unique. So every HTML tag you specify should have a different ID. If you want to hide all of a certain element, it might be suitable to add a class to the elements you wish to hide?
e.g.
<div class="divToHide">Content...</div>
<div class="divToHide">Content...</div>
<div class="divToHide">Content...</div>
Then your jquery would be:
$(".divToHide").hide();
That's simply because you cannot have more than one element with a specified ID. IDs are and must be unique. Only one single element with the same element may exist in a DOM.
Failing to follow this rule may result in broken scripts and other horrors.
You can use classes for this purpose.
an ID can only be used ONCE in HTML! because its a id and a id should always be Unique
I have a form with several spans with id="myid". I'd like to be able to remove all elements with this id from the DOM, and I think jQuery is the best way to do it. I figured out how to use the $.remove() method to remove one instance of this id, by simply doing:
$('#myid').remove()
but of course that only removes the first instance of myid. How do I iterate over ALL instances of myid and remove them all? I thought the jQuery $.each() method might be the way, but I can't figure out the syntax to iterate over all instances of myid and remove them all.
If there's a clean way to do this with regular JS (not using jQuery) I'm open to that too. Maybe the problem is that id's are supposed to be unique (i.e. you're not supposed to have multiple elements with id="myid")?
.remove() should remove all of them. I think the problem is that you're using an ID. There's only supposed to be one HTML element with a particular ID on the page, so jQuery is optimizing and not searching for them all. Use a class instead.
All your elements should have a unique IDs, so there should not be more than one element with #myid
An "id" is a unique identifier. Each time this attribute is used in a document it must have a different value. If you are using this attribute as a hook for style sheets it may be more appropriate to use classes (which group elements) than id (which are used to identify exactly one element).
Neverthless, try this:
$("span[id=myid]").remove();
id of DOM element shout be unique. Use class instead (<span class='myclass'>).
To remove all span with this class:
$('.myclass').remove()
if you want to remove all elements with matching ID parts, for example:
<span id='myID_123'>
<span id='myID_456'>
<span id='myID_789'>
try this:
$("span[id*=myID]").remove();
don't forget the '*' - this will remove them all at once - cheers
Working Demo
The cleanest way to do it is by using html5 selectors api, specifically querySelectorAll().
var contentToRemove = document.querySelectorAll("#myid");
$(contentToRemove).remove();
The querySelectorAll() function returns an array of dom elements matching a specific id. Once you have assigned the returned array to a var, then you can pass it as an argument to jquery remove().
You should be using a class for multiple elements as an id is meant to be only a single element. To answer your question on the .each() syntax though, this is what it would look like:
$('#myID').each(function() {
$(this).remove();
});
Official jQuery documentation here.
As already said, only one element can have a specific ID. Use classes instead. Here is jQuery-free version to remove the nodes:
var form = document.getElementById('your-form-id');
var spans = form.getElementsByTagName('span');
for(var i = spans.length; i--;) {
var span = spans[i];
if(span.className.match(/\btheclass\b/)) {
span.parentNode.removeChild(span);
}
}
getElementsByTagName is the most cross-browser-compatible method that can be used here. getElementsByClassName would be much better, but is not supported by Internet Explorer <= IE 8.
Working Demo
There are several elements that are selected by $(".foo"). $(".foo").text() returns the text of each element concatenated together. I just want the text of one element. What is the best way to do this?
$(".foo")[0].text() fails.
You want to use .eq(0), like this:
$(".foo").eq(0).text()
When you do $(".foo")[0] or $(".foo").get(0) you're getting the DOM Element, not the jQuery object, .eq() will get the jQuery object, which has the .text() method.
Normally using the # selector syntax selects one element by id attribute value. Do you have more than one element with the same id attribute value? If so, then you need to correct your HTML. id attribute values should be unique within a document.
The items in the jQuery array always return the dom elements (not the jQuery wrapped elements). You could do something like:
$($("#foo")[0]).text()