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.
Related
I have multiple divs with ids like course1_popup, course2_popup, course3_popup. I want to make a function something like
$('#course*_popup').hide();
so that all course*_popup divs should hide but this is not working. Any Ideas?
Use the combination of attribute starts with and ends with selectors.
$('[id^="course"][id$="_popup"]').hide();
FYI : It would be much better to use a common class for the group of elements for such things.
Easiest way: Give all the same class like course_popup and then:
$('.course_popup').hide()
Other solution was postet a sec ago ;)
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.
For example, I have data-min-checkbox and data-min-select attributes.
How can I select both elements matching data-min with construction like $([data-min-*])?
Use
document.querySelectorAll("[data-min-checkbox],[data-min-select]")
Think CSS selectors for the win
I have created some divs programmatically with jQuery and I would like to apply the same functionality to all divs.
I have created an example to jsfiddle. Check it here
As you can see in the example the first <div class="autosize"> behaves really well but the second <div class="autosize_2"> does not have any functionality except from the click (actually I am not sure why click works).
Can someone help me or give me an example on how to achieve the desired functionality?
Thanks
It seems to work fine if you just add #pointer_div_2 after every #pointer_div separated by a comma.
$('#pointer_div, #pointer_div_2').on ... etc.
Example: http://jsfiddle.net/wm3y5/13/
Basically, you are just targeting multiple selectors using the comma
Read more: http://api.jquery.com/multiple-selector/
You could use class="autosize" on all of them. If you actually need unique id's for each you should use id="autosize", id="autosize_2",etc in addition to the class.
Or you could use multiple classes on each: class="autosize autosize_1", class="autosize autosize_2", etc.
You can use
$(document).on('click',selector,handler)
in order to attach an handler to all elements matching selector now and in the future.
I have a div with id #test that contains lots of html, including some youtube-embeds etc.
Somewhere in this div there is this text: "[test]"
I need to replace that text with "(works!)".
The normal way of doing this would of course be:
document.getElementById("test").innerHTML = document.getElementById("test").replace("[test]","(works!)");
But the problem is that if i do that the youtube-embeds will reload, which is not acceptable.
Is there a way to do this?
You will have to target the specific elements rather than the parent block. Since the DOM is changing the videos are repainted to the DOM.
Maybe TextNode (textContent) will help you, MSDN documentation IE9, other browsers also should support it
Change your page so that
[test]
becomes
<span id="replace-me">[test]</span>
now use the following js to find and change it
document.getElementById('replace-me').text = '(works!)';
If you need to change more than one place, then use a class instead of an id and use document.getElementsByClassName and iterate over the returned elements and change them one by one.
Alternatively, you can use jQuery and do it even simpler like this:
$('#replace-me').text('(works!)');
Now for this single replacement using jQuery is probably overkill, but if you need to change multiple places (by class name), jQuery would definitely come in handy :)