Ok, I have a bunch of images with the same ID of "mashupButton", however I was under the impression that if I make a jQuery click function using "this", instead of "#mashupButton" it would only perform the function on the image clicked. This works for me, but only for the first image with that ID on the page, and after I've done it once, it no longer works.
After document is ready:
$("#mashupButton").click(function()
{
$(this).effect("drop", {direction:"up"}, 1000);
});
Tag is like:
<img src="imagename.png" id="mashupButton">
So to clarify:
I have say 10 images all with the ID mashupButton - I have a jQuery effect that is performed on that specific image when it is clicked. However it only works on the FIRST of those images, even though they all contain the same ID. Do I need to have unique ID's for each one, or can it be achieved this way somehow?
The values for "id" attributes must be unique within a page. It is not correct markup to re-use "mashupButton" as the "id" for a "bunch" of images. Each <img> tag must have its own unique "id" (or no "id" at all, of course). You could use the "class" attribute to mark such <img> elements as being candidates for your "click" handler, of course.
I have say 10 images all with the ID mashupButton
It is illegal to have more than one element with the same id.
If you want to use one selector, you should add a classname.
To expand on #Pointy's answer... yes, the id values must be unique. If you can change the markup, simply change the id attributes to class attributes.
<img src="imagename.png" class="mashupButton" ...
Then your jQuery would look like:
$( '.mashupButton' ).click( function() ...
You have a syntactically-invalid page. When you have troubles, you should always validate your HTML (and validate your CSS) before looking any further.
Instead create a class for those images and then use jQuery to add the click to all the images.
$(".mashupButton").click(function()
{
$(this).effect("drop", {direction:"up"}, 1000);
});
<img src="imagename.png" class="mashupButton">
Related
I would like to click on a div but the div in question shares the same ID as another div. I have tested several solutions, especially with xpath, but nothing works.
Is there any other solution to click without selector and xpath ?
html
<div class="modal-button" id="button-grey"> Cancel </div>
<div class="modal-button create-modal-button modal-blue-button" id="button-grey"> Accept </div>
My code :
await page.click('#button-grey')
With this code, It clicks cancel when I'd like it to click accept.
Thank advance for your help
It is possibly clicking cancel because the first div it encounters with the id button-grey is your div that says cancel.
Ids are supposed to be unique. Instead try making button-grey a class and add it as an additional class to both divs. Then give the div that says accept a unique id. Use this unique id within await page.click(yourUniqueID).
As Chris G has mentioned, id attributes are meant to be unique to that specific element.
MDN Web Docs describes an id attribute as the following:
The id global attribute defines an identifier (ID) which must be unique in the whole document. Its purpose is to identify the element when linking (using a fragment identifier), scripting, or styling (with CSS).
Don't use onClick(), but simply change the ids to something more descriptive that are unique. It also makes finding specific elements in your code much easier.
If you cannot change the code, for example if you are web scraping and need them elements, you can use .modal-button:nth-child() to find whatever button you need.
your html is not valid, you can't set serval html tag with the same id.
check your html in [W3C validator]: https://validator.w3.org/#validate_by_input
Transform your "button-grey" id to class
As the comments suggest, id's must be unique.
With this code, It clicks cancel when I'd like it to click accept?
This happens because the browser will use the first element it finds with that id because it only ever expects to find one. In your case, the first one found is for cancel.
It is a faulty HTML code that has multiple items with the same id (which is supposed to be unique). As your question is:
Is there any other solution to click without selector and xpath?
here is a solution with elementHandle.click on the 2nd element [1] with the same id:
const elementHandles = await page.$$('#button-grey')
await elementHandles[1].click() // click 2nd element [1] with the same id
Anyway, XPaths can be useful sometimes if you have to click something based on its text content:
const acceptHandle = await page.$x("//div[#id='button-grey' and contains(text(), 'Accept')]")
await acceptHandle[0].click() // XPath returns an array, the first item [0] is the matching element
I have a div in my form
<div id="s2id_s52dcecf43a846_membership">
<div>
I want to find the div by the name "membership" because the other elements of the id are randomly generated.
How to get the div by just getting the partial value of the div id ?
I want to get it via jQuery/Javascript.
Thanks,
FaisalNasir
If the id starts with "membership" and then comes the random part you can use:
$('[id^="membership"])
You can also use "contains" selector, like
$('[id*="membership"])
If you want to search by the name, you can use
$('[name=membership]');
Keep in mind this might give you more than one element.
You can also check more selectors here
just getting the partial value of the div id
Just try the attribute contains selector,
$('[id*="membership"])
Or the better way would be add a common class to those elements
Please read here to know more about Jquery selectors
Continuing on from: https://stackoverflow.com/questions/16649933/jquery-on-form-change-with-bootstrap-sliders/16650319?noredirect=1
I am currently using the below to capture the ID of a slider and change the content of #log. The problem with this is that is only capture the first slider. I need this to be actioned when any slider is changed.
I've tried using the ID of price on all my sliders, however this doesn't work.
$('#price').each(function(index,value){
$(this).bind('slide', function(){
$("#log").prepend('<p>Changed</p>')
});
});
The reason this doesn't work is because JavaScript conforms with the HTML specification, and the HTML specification states that ID attributes must be unique.
You aren't allowed to have two elements with id="price". Because of this JavaScript will stop searching after it has found the first match. Your .each() loop will only go around once, regardless of how many #price elements are present after the first.
To resolve this, use classes instead. For example:
<div class="price">...</div>
<div class="price">...</div>
<div class="price">...</div>
$('.price').each(function(index,value) { ... });
You will also need to change your #log elements to use classes, too.
$('#price') is id, page include one duplicate id. you need use class
I have a site that has multiple divs with the same id name. I want to set a mouseleave function for all of the divs that have this id. In my $(document).ready function I have this code...
$('#my_post_container').mouseleave(function(e)
{
hideSnippet();
});
My hideSnippet() function is correct, but doing this only set the mouseleave function for the first time that a div comes up of id my_post_container. Is there a way to set the mouseleave function to all divs with this id?
I have a site that has multiple divs with the same id name.
Then you need to fix that. You must not have more than one element with the same id. id values must be unique on the page.
You probably want to use class instead, at which point your code is basically fine:
$('.my_post_container').mouseleave(function(e)
{
hideSnippet();
});
...although it coudl be shortened a bit if hideSnippet doesn't care what arguments it gets, doesn't care about this, and doesn't return false:
$('.my_post_container').mouseleave(hideSnippet);
It is invalid HTML to have multiple objects with the same id. As such, you cannot use normal selectors to find them all and you should fix your HTML to not do that.
The #1 suggestion is to fix the HTML so it does not have multiple objects with the same ID. Use a class name and you can then select them all with getElementsByClassName() or querySelectorAll() or with jQuery selectors as in:
$('.my_post_container')
If you insist on having multiple objects with the same id (a bad choice), then you will have to somewhat manually iterate over all possible objects that could have that id.
$("div[id='my_post_container']");
But, this is pretty darn inefficient because the browser can't use any of the built-in selector engine logic and it could break in the future if jQuery decides to optimize this. You really ought to switch to using class names.
You can not have multiple elements on the same page with the same id. Use a class instead, as shown here:
HTML:
<div class="my_post_container">...</div>
<div class="my_post_container">...</div>
<div class="my_post_container">...</div>
jQuery:
$('.my_post_container').mouseleave(function(e)
{
hideSnippet();
});
First of all there should not be any div elements with same ID name.. first we should solve that by keeping class name same.
then on mouse leave and enter part..
$(".testClass").on({
mouseenter : function() {
$(this).css({"background-color" : "blue"});
},
mouseleave : function() {
$(this).css({"background-color" : "green"});
}
});
this should work.. will add a js sample http://jsfiddle.net/meVc6/
and the same thing can be achived using css too..
just add css .testClass:hover { background-color:blue}
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