I have this html.
<a class="link" href="www.website?id=233253">test1</a>
<a class="link" href="www.website?id=456456">test2</a>
How can I hide one of these links by using the href attribute, and just the last numbers (233253), to hide the link with this href attribute and the class "link"?
This is not a working code, just something i put together to explain it better. getElementsByTagName('a').class('link').href="*233253"
Update: Unfortunately it has to be pure javascript, not using a library, and it has to work on IE6.
Update2: I don't have access to the html
I have this html.
<a class="link" href="www.website.?id=233253">test1</a>
<a class="link" href="www.website.?id=456456">test2</a>
How can I hide one of these links by using the href attribute, and just the last numbers (233253), to hide the link with this href attribute and the class "link"?
This is not a working code, just something i put together to explain it better. getElementsByTagName('a').class('link').href="*233253"
Update: Unfortunately it has to be pure javascript, not using a library, and it has to work on IE6.
Update2: I don't have access to the html
Share Improve this question edited Mar 6, 2009 at 8:11 Sindre Sorhus asked Mar 5, 2009 at 9:16 Sindre SorhusSindre Sorhus 63.5k40 gold badges175 silver badges234 bronze badges5 Answers
Reset to default 4Using jQuery:
$("a.link[href$='233253']").hide();
The $= attribute selector matches all elements where the selected attribute ends with the given value.
[edit]: code was somewhat sloppy, should work now. Including the split method (see ments).
Loop through the a elements, check href and apply the hiding. Like this:
var refs = document.getElementsByTagName('a');
for (var i=0;i<refs.length;i++) {
if (
refs[i].href &&
refs[i].href.replace(/(\d+$)/,'$1').match('[your value to match]')
) {
refs[i].className = refs[i].className.replace(/link/i,'');
refs[i].style.display = 'none';
}
}
OR
for (var i=0;i<refs.length;i++) {
var hs = refs[i].href.split(/=/)[1];
if ( hs.match([your value to match]) ) {
refs[i].className = refs[i].className.replace(/link/i,'');
refs[i].style.display = 'none';
}
}
<html>
<head>
<script type="text/javascript">
function hideLinks(className, ids) {
var links = document.getElementsByTagName("a");
var max = links.length;
for (var i=0; i<max; i++) {
var link = new RegExp("(\s*)"+ className +"(\s*)");
var isLink = link.test(links[i].className);
if (isLink) {
for (var j=0; j<ids.length; j++) {
var regexp = new RegExp(ids[j] + "$");
var hasId = regexp.test(links[i].href);
if (hasId) {
links[i].style.display = "none";
}
}
}
}
}
window.onload = function() {
hideLinks("link", [233253]);
}
</script>
</head>
<body>
<a class="link" href="www.website.?id=233253">test1</a>
<a class="link" href="www.website.?id=456456">test2</a>
</body>
</html>
Edit: I posted a new version after reading your ment about encapsulating the functionality inside a function. This one should work just as well as the previous version.
No offense but creating loops seems like a workaround to me. If you could add unique id's to the links that would obviously be the preferred method.
After that you could use 'getElementById' to set a different class to hide the particular link.
What distinguishes one link from another? If you know that on the server side then add appropriate classnames and which will be hidden, in a static way, from the CSS.
Dynamically determining what needs hiding will require you to dynamically generate your javascript snippet, unless you render this inside the HTML.
Update: If you don't have access to the generated HTML then my post does not help you.