Develop Reference

Catch div which has class name and has css attribute with specific value [duplicate]

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.

it is possible to add <data-*> values like classes?

Is there way to write data attributes in class-like form? I mean like this:
<div data-el="asset assets.asset">Some div</div>
And I want to use it like classes in selector, I need to find this element as "[data-el='asset']" and also as "[data-el='assets.asset']".
Maybe there is similar way to do so. Thanks for advices!

Take a look at the attribute selectors available:
https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors
What you want to use is this:
[data-el~="assets.asset"]
That will find "assets.asset" as a single word with whitespace delimiting. I use this sort of selection sometimes and it works well.

Select Elements Numerically Dynamic in jQuery

I'm just wondering how I can select elements in jQuery dynamically, for example here is a selector of mine:
$("#video_background_video_0, #video_background_video_1, #video_background_video_2, #video_background_video_3, #video_background_video_4").remove();
As you can see this isn't the best example of DRY programming, I'd like to create a selector that selects all elements that begin with #video_background_video_. I basically just want to select the above elements in the cleanest way, I was wondering if there is a way that I can dynamically select these elements with some sort of count instead of placing all of my selectors like so, it just looks very messy and I'm wondering if there is a better way to do this when it comes to elements with a numeric ending?
As jQuery uses a CSS selector syntax I am unsure how I can do this.
Thanks, Nick

You can use start-with selectors:
$('[id^="video_background_video"]').remove();
There are other attribute selectors you might be interested here.

Try to use attribute starts with selector,
$("[id^='video_background_video'")
Also make sure that, this selector is not a native css based one. It will fetch the elements after executing regular expressions internally. So it would be better to use it in a minimum level. Its Better to set a common class to those elements and use class selector instead.

jQuery - Selector for duplicate ID's

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

How can I target an element's 'parent'

I have some <TD>s without unique names. Inside them there are spans with unique classnames so I have no problem targetting the spans. How can I target the parent <td> so I can change its class?
I want to do something like $(".classname").parent("TD").className="newClassclassname".

You were close:
$('.classname').parent('td').addClass('newClassName');
Though typically it's safer to go with:
$('.classname').closest('td').addClass('newClassName');
... which doesn't assume the <td> is the immediate parent.
The reason .className doesn't work is because jQuery returns elements wrapped in the jQuery object. If you want to access the original (DOM) object you need to select the first item in the jQuery collection with [0]:
$('.classname').parent('td')[0].className = 'newClassName';
But I recommend using the jQuery function addClass() anyway since it won't interfere with existing classes.

You can do
$("span.classname").closest("td").addClass("newClassclassname");

Sorry, do you mean following code:
$(".classname").parent("TD").addClass("newClassName");

$(".classname").parent("TD")[0].className="newClassname";

$(".classname").parent().addClass("newClassclassname");