How to select only links without `#`? - javascript

I want to select only links that do not contain anchors, like #. How do I do that?

This will select all anchors whose href attribute does not begin with #.
$('a:not([href^="#"]');
It could be a slow selector. Are you using it only once or multiple times? You can speed it up a little like:
$('a').not('[href^="#"]');
If you also do not want to select anchors which contain a #anywhere, rather than just the beginning you can change the ^ to a *. But this will also not select links that reload the browser (going to a different page and then to a named anchor on that page). I don't think that's want you want, but I'm not positive now.

I'm so surprised by all the fast answers, as most of them don't actually do what was asked for.
$('a:not([href*="#"])');
Should select links that don't contain "anchors" or as I assume OP meant: in-page anchor/id tags.

Try this:
$(':not(a[href*="#"]));
This will be faster (and will select only anchors as well):
$('a:not([href*="#"])');

Use this code:
If you want to filter href="#":
$('a[href!="#"]')
Otherwise:
$('a').filter(function(){
return !/#/.test(this.href);//you can filter what you do not want with the regex
})

Related

How do I ensure that every one of my icons are clickable? [duplicate]

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

Click on Link with javascript

Is there a way to find a link in web page and click on It with javascript code ?
I also tried document.getElementById('yourLinkID').click();
but i want to replace URL instead of ID
but i want to replace URL instead of ID
Sounds like querySelector() may be what you're looking for. Something like this perhaps:
document.querySelector('a[href="your_url_here"]').click();
If you have multiple matching elements then you might also take a look at querySelectorAll() and perhaps just invoke .click() on the first matching element.

How to remove all pseudo selectors from a CSS selector string using Javascript?

For a script I'm doing I need to verify a CSS selector exists in the DOM. I'm wondering how to handle multiple :pseudo selectors with a generic rule.
Something like this is simple:
var selector = "div.foo div.bar:active"
which could be handled by
selector.split(":").shift(); // > div.foo div.bar
but when I have multiple selectors, I'm don't know how I could remove them. Something like this:
var selector = "div.foo:hover div.bar:after"
Question:
How would I remove all CSS pseudo selectors (":something") from a string?
You can remove them with a regular expression and replace:
selector = selector.replace(/::?[^ ,:.]+/g, '');
(The ::? means one or two colons [you could also write it as :{1,2}], to handle ::after and such; full regex explanation.)
That works for most situations, but if you have really complex pseudos with nested pseudos like foo.bar:not(.baz:active) (will be in CSS4), you'll need an actual CSS selector parser to handle them properly. While you could probably build a regex alternation that would handle one bit of nesting, in theory there can be multiple nesting, which is where a parser comes in.
But note that some of these pseudos do affect which element is chosen, such as :nth-child, so if your goal is to see if a matching element is in the DOM, you wouldn't want to remove those. So you might want to take the fairly pragmatic approach of listing the ones that you want to remove in a series of alternations, e.g.:
var toRemove = /:hover|:active|:before|:after|::?before|::?after|:and-so-on/g;
// ...
selector = selector.replace(toRemove, '');
There aren't all that many, and it eliminates the chance of removing important structural ones line :nth-child.
Removing all pseudo-selectors will not solve your problem.
Take this example:
p:first-child {}
<div>
<div></div>
<p></p>
</div>
Since the paragraph is not the first child (and won't be unless the DOM changes), removing :first-child from the selector will give you a false positive match.
You need to remove only the pseudo-classes which are conditional upon things like mouse or keyboard interaction and the psuedo-elements. Then you need to special case :link and :visited so that the match anchors that are links and not ones that aren't (replacing them with an attribute selector of [href] is a slightly naïve approach, but should be good enough for all practical purposes).
You'll also need to make a decision for :enabled and :disabled. They aren't going to be changed by user interaction, but if you plan to toggle them with JS then you'll probably want to remove them.
Since there are a lot of conditions here, I'd write a function for it rather than attempting a simple regex.

Replace part of innerHTML without reloading embedded videos

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 :)

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

Categories

Resources