I've been using CSS3 selectors to select specific elements based on their attributes, although today, I have programmed myself into a corner, where I need a select a specific element based on the presence of TWO different attributes, instead of only 1.
e.g. I need to select the first div.
<div data-foo="bar" data-bar="baz">
<div data-foo="bar" data-bar="lorem">
<div data-foo="ipsum" data-bar="baz">
Just for fun, I tried div[data-foo="bar", data-bar="baz"], but not surprisingly, that didn't work.
Is there any way for me to get that specific element?
Right now, the only solution I can think of is to select all elements with the correct data-foo attribute, and then loop through the results to find the element with the correct data-bar attribute.
You were close, it's:
div[data-foo="bar"][data-bar="baz"]
Live example
From the CSS 2.1 specification:
Here, the selector matches all SPAN elements whose "hello" attribute has exactly the value "Cleveland" and whose "goodbye" attribute has exactly the value "Columbus":
span[hello="Cleveland"][goodbye="Columbus"] { color: blue; }
(There's a new CSS3 Selectors spec as well, which is increasingly supported, but we don't need CSS3 features for this.)
Related
I have a page with duplicate ID's for a form element. The catch is I the elements show up separately based on a toggle. So both ID's never show up simultaneously.
However when I do form validation on that element, it always selects the element displayed last in the code (even if its hidden).
Is there a selector to select the visible duplicate ID?
I've tried the following but to no avail:
$('#my_element:visible').val();
As the myriad of other questions about this premise will tell you, you cannot use the ID selector # in this case; you have to use something like $('div[id=foo]') to find it.
Duplicate IDs are invalid HTML and will nearly always cause issues with scripting. Avoid if at all possible.
The reason this is occurring is because of Duplicate IDs. IDs must be unique for the HTML to be considered valid. Whenever you aren't working against valid HTML, your results are often erratic.
In this case, even though you are only showing one of the forms at a time, they're both still present in the mark up which is why the last one in the code is always the one that's getting run.
Since you're using jQuery, I'd highly recommend using classes for this instead.
Avoid duplicates ids on the page. It is not a valid HTML.
as Rwwl said, duplicate IDs are invalid. Assign classes instead of ids to them.
Then you can do
alert($('.my_element:visible').val());
try :hidden
$("#my_element").find(":hidden").val();
Elements can be considered hidden for several reasons:
They have a CSS display value of none.
They are form elements with type="hidden".
Their width and height are explicitly set to 0.
An ancestor element is hidden, so the element is not shown on the page.
NOTE: Elements with visibility: hidden or opacity: 0 are considered to be visible,
Do not use same id for multiple elements, classes are better!
You can not specify using the # id selector only, you need to be more specific. One way is choose the type of element first then id:
For an input element:
$('input#my_element:visible').val();
or for a div element:
$('div#my_element:visible').val();
An alternative solution to select the element with jQuery and then get value from from the element directly:
$('#my_element:visible')[0].value
Is there a CSS selector to select this element by its inline style attribute value?
<div style='display:block'>...</div>
something like
div[cssAttribute=cssValue]
The inline style attribute is no different to any other HTML attribute and can be matched with a substring attribute selector:
div[style*="display:block"]
It is for this very reason however that it's extremely fragile. As attribute selectors don't support regular expressions, you can only perform exact substring matches of the attribute value. For instance, if you have a space somewhere in the attribute value, like this:
<div style='display: block'>...</div>
It won't match until you change your selector to accommodate the space. And then it will stop matching values that don't contain the space, unless you include all the permutations, ad nauseam. But if you're working with a document in which the inline style declarations themselves are unlikely to change at all, you should be fine.
Note also that this is not at all selecting elements by their actual specified, computed or used values as reflected in the DOM. That is not possible with CSS selectors.
Including ";" works better for me.
div[style*="display:block;"]
Always look how the attribute is written in HTML (you can check it in the Elements tab in the browser). You have to use the exact same value. In my case: style="left: 100%;". And not style="left:100%" or anything like that.
I want to toggle(hide/show) an element when a button is being pressed. I have two ways as to implement this:
Find the element according to its class name, e.g $('.my-content')
Find the element according to its relevant DOM position towards the button, e.g. $('#my-button').parent().next().next().next()
However, none of the above seems to me very reliable since in case someone changes the HTML code, the above approaches should not work. Is there something more reliable I am missing?
If it's a specific element, supply it with an Id value and use that
to find it.
If it's a TYPE of element, use a class name.
Other than that, there's no real conventions. Just try and make sure that somebody reading your code understands what is going on.
A very good practice is to decouple HTML, CSS and JS.
When binding javascript to DOM elements you should use javascript selectors.
Basically classes with some custom prefix (like js-) which will be used only for javascript purposes (not css style).
So whenever the DOM tree structure or the CSS class names are changed, you can still have your working JS selector
HTML
<div class="my-content js-toggle-element"></div>
JS
$('.js-toggle-element')
CSS
.my-content{ ... }
Plus, using Javascript Selectors:
makes HTML highly readable: you can easily find out what will happen to that element with that js class
allows you to easily apply/disapply that behaviour also to other elements in the future, simply by adding/removing that class in your HTML and without affecting CSS at all
<div class="my-content js-toggle-element"></div>
...
<div class="another-content-to-toggle js-toggle-element"></div>
Using jQuery will be much easiest way. Like this -
$( ".target" ).toggle();
The matched elements will be revealed or hidden immediately, with no animation, by changing the CSS display property. If the element is initially displayed, it will be hidden; if hidden, it will be shown.
Reference - jQuery Toggle
If the class or the position of the element in DOM is changing then you can try
selecting it with the inner text
$("button:contains('buttontextgoeshere')")
I have a page with duplicate ID's for a form element. The catch is I the elements show up separately based on a toggle. So both ID's never show up simultaneously.
However when I do form validation on that element, it always selects the element displayed last in the code (even if its hidden).
Is there a selector to select the visible duplicate ID?
I've tried the following but to no avail:
$('#my_element:visible').val();
As the myriad of other questions about this premise will tell you, you cannot use the ID selector # in this case; you have to use something like $('div[id=foo]') to find it.
Duplicate IDs are invalid HTML and will nearly always cause issues with scripting. Avoid if at all possible.
The reason this is occurring is because of Duplicate IDs. IDs must be unique for the HTML to be considered valid. Whenever you aren't working against valid HTML, your results are often erratic.
In this case, even though you are only showing one of the forms at a time, they're both still present in the mark up which is why the last one in the code is always the one that's getting run.
Since you're using jQuery, I'd highly recommend using classes for this instead.
Avoid duplicates ids on the page. It is not a valid HTML.
as Rwwl said, duplicate IDs are invalid. Assign classes instead of ids to them.
Then you can do
alert($('.my_element:visible').val());
try :hidden
$("#my_element").find(":hidden").val();
Elements can be considered hidden for several reasons:
They have a CSS display value of none.
They are form elements with type="hidden".
Their width and height are explicitly set to 0.
An ancestor element is hidden, so the element is not shown on the page.
NOTE: Elements with visibility: hidden or opacity: 0 are considered to be visible,
Do not use same id for multiple elements, classes are better!
You can not specify using the # id selector only, you need to be more specific. One way is choose the type of element first then id:
For an input element:
$('input#my_element:visible').val();
or for a div element:
$('div#my_element:visible').val();
An alternative solution to select the element with jQuery and then get value from from the element directly:
$('#my_element:visible')[0].value
Is it possible to set a new attribute to the last position of a html element using javascript/jQuery?
This would be helpfull for me in a case where the attribute order is important to decide whether the paragraph has changed or not.
Example:
<p attribute1="true" attribute2="true">
Now, i would like to add a third attribute so that the resulting paragraph would look like
<p attribute1="true" attribute2="true" attribute3="true">
No, it's not possible. Attributes are unordered in HTML and XHTML markup languages, so browsers are free to return them in whatever order they like, e.g. alphabetic, specified, etc.
You should rethink your approach, for instance using the .data() method to track changes:
$("#el").data("changeHistory", []);
// ...
$("#el").data("changeHistory").push(new Date().toString());
Optimally you should never be in a position where you need to read attributes in order (by index).
If you have an element like so <div id="container">, you can add an attribute using jQuery like so $('#container').attr('disabled', true);. Keep in mind this should add the attribute to the end of the element.
Another tip is if you are looking to modify a DOM element attribute such as style, consider looking at the jQuery API to see what methods are avialable before writing anything too crude. For example, if you wanted to add a style you could simply do $('#container').addClass('hover');