I have c# code which generates Anchor tags on fly. I wanted to change some of anchor tag target based on its text.
For example dynamic code generated HTML like below
<a target='_blank' class=txt href="http://www.stackoverflow.com">THE BEST SITE</a>
I wanted to change its target if text equals THE BEST SITE
Note: I have no jQuery files included in asp.net project.
So far I have tried including this script just to get the text, but it is not even displaying the alert
$(document).ready(function() {
$(".txt").click(function() {
alert($(this).text());
});
});
Here is a function that checks if an element's innerText is equal to a specific phrase. If it is, it sets the target attribute specific to that phrase.
function changeTarget(elem, phrase){
if(elem.innerText === phrase){
elem.target = phrase;
}
}
Depending on your DOM, you could just iterate through all your anchor elements and run this function with the desired phrase.
If you have a bunch of these with the .txt class you can just do something like:
var elems = document.querySelectorAll('.txt');
for(var i = 0; i < elems.length; i++){
changeTarget(elems[i], "THE BEST SITE");
}
I think you want something like
var els = document.getElementsByClassName('txt');
for(var i=0; i<els.length; ++i)
if(els[i].textContent == "THE BEST SITE")
els[i].target = 'something';
Related
I've gone through many SO threads, I can't seem to find a working solution.
All I'm trying to do is when the page loads, the site pushes all elements with the ".home" class into the array arr. Then, the script parses through each element in the array and tries to match it with a string. For example, right now all I have is a check to see if the element has the words "Boston" in it, in which case I want to make the image source for ".homeimage" the linked imgur link. I'm aware it's not wise to host images on imgur for these reasons, I'm just trying to check if it works. Below this test I have some redundant code I was practicing with that I found in a SO thread, changing the color of text to gray. I figured changing attributes is the same.
my html code:
<td colspan = "3"width=400px class = "home"><b><%= game.home %></b></td>
<td colspan = "3"><img style="width:150px;height:128px;" class = "homeimage"></td>
my javascript/jquery code:
<script>
var arr=[];
$(document).ready( function(){
$(".home").each(function(){ arr.push($(this));});
for(i = 0; i < arr.length; i++){
if(arr[i].indexOf "Boston" != -1){
$('.homeimage img').attr("src","http://i.imgur.com/s5WKBjy.png");
}
}
$.each(arr,function(key,val){
val.css('color','gray')}); //something redundant i was testing out
});
</script>
additional questions:
When I have multiple image with the .homeimage class, and multiple checks to determine the image source, will it make all of the images in the .homeimage class that src at the end? So whatever the last image that gets checked is the image src for all of the images with the ".homeimage" class? I don't want that. How can I uniquely make each image? Make a custom id instead of a class for each div? Also, does this script have to be below the html in question? Or does that not matter
Thanks for the future advice you all.
// I don't quite understand what you want to do.
// Since you type too much, and make no highlights.
// but here are somethings I found:
var arr = []; // this array is going to contain all tags (like td) with class '.home'
if(arr[i].innerHTML.indexOf("Boston") != -1) { } // indexOf() won't work on DOM element
// then arr[0] must be a DOM element, so why you call .indexOf("Boston") on it?
// next, $('.homeimage img') all return DOM element with class 'homeimage' or with tagName 'img'
$('img.homeimage'); // this may what you want to do.
// Alright, I try to give you an answer.
// this oImgUrl works as a map from some ((String))-->((img url))
var oImgUrl = {
'Boston': 'http://another.imageurl.com/boston.png',
'NewYork': 'http://another.imageurl.com/newyork.png'
};
// I take your "arr" unchanged
// this will test every element in arr
// if carry String like 'Boston' or 'NewYork'
// then find the img tag (img.homeimage) in it.
// then apply URL string to img tag
for (var i=0, length=arr.length; i < length; i++) {
if(arr[i].innerHTML.indexOf("Boston") != -1) {
arr[i].find('img.homeimage').attr('src', oImgUrl['Boston']);
continue;
}
if(arr[i].innerHTML.indexOf("New York") != -1) {
arr[i].find('img.homeimage').attr('src', oImgUrl['NewYork']);
continue;
}
}
example html:
<td class='home'>Welcome to Boston!<img class='homeimage'></td>
<td class='home'>Welcome to New York!<img class='homeimage'></td>
answers:
Question 1: Custom ID?
JavaScript will find these two td.home and add them into arr.
then, apply different image url to img tag
according to innerHTML of the td tag.
when doing this, you don't need to set each img tag an unique ID.
Question 2: Script place below html?
No, you don't have to.
You hold all thses script in docuement ready function
so, they will only work when HTML DOM is ready.
in another words, no matter where you place this script,
they will be invoked after Every Tag is ready.
I am trying to write a function for an extension that can find a link inside a specific div and click it. The link has no id or class name, so I was looking for something similar to a CSS selector but with JS without using '$' or 'jQuery' since that will require me to embed a jquery library with the extension.
The div has a class name and then a link inside, so this is the code I have so far --
function COut() {
var a = document.getElementsByClassName('bottom_row').getElementsByTagName('a');
for (var i = 0; i < a.length; i++) {
var elem = a[i],
elem.click();
}
}
This the markup for the div and link -
<div class="bottom_row">
<a onclick="miniAddToCart.closeMiniAddToCart({cmConversionEvent: 'Checkout'})" href="http://www.domain.com/shoppingcart/default.cfm?checkout=1&"><img src="http://www.domain.com/images/eb/minicart/checkout.gif" alt="Checkout"></a>
</div>
Any ideas what Im doing wrong?
getElementsByClassName('bottom_row').getElementsByTagName('a');
getElementsByClassName returns a set, not a single item
getElementsByClassName('bottom_row')[0].getElementsByTagName('a');
^^^
If there can be more than one item with the className, than you will need to loop. And if you support modern day browsers, you can look into querySelectorAll
And finally clicking on a link is not as easy as calling click()
How can I simulate a click to an anchor tag?
If you want it to do to the url, you might be better off just setting window.location.href
If there is a single A tag, I won't prefer to make loop for that. Instead you can just do it like:
function COut() {
var a = document.getElementsByClassName('bottom_row')[0].getElementsByTagName('a')[0];
if(a){
a.click();
}
}
I'm looking for a way to search for any links that have an href of "#" and change the CSS styling of them to make those links a different color. Essentially, I want to be able to easily identify which links are broken and which aren't.
This is being used for a massive documentation project, and not all of the files are uploaded yet. I want users to be able to easily identify which links work and which won't. Is this able to be done with Javascript somehow?
You need to loop through all the links on the page, checking them individually and changing the style if required. Here's a starting point for you to expand from:
var anchors = document.getElementsByTagName('a'); //Get all the links
for(var i = 0; i < anchors.length; i++) { //Loop through links
if(anchors[i].href === '#') { //If link points to "href",
anchors[i].style.color = 'red'; //then change the link's color to red
}
}
in javascript you can do somehow like following:
var els = document.getElementsByTagName("a");
for (var i = 0, l = els.length; i < l; i++) {
var el = els[i];
if (el.href === '#') {
//do something here
}
}
I think that's the wrong approach. You should probably have a server-side process that parses your files and fixes/identifies the broken links rather than doing it at runtime using JavaScript.
However, you can query elements based on their href attribute using document.querySelectorAll.
[].forEach.call(document.querySelectorAll('a[href="#"]'), function (link) {
link.style.color = 'red'; //change style
});
I know this is an old question, but this question needs an answer that doesn't require JavaScript - styling links based on their href with pure CSS is much more efficient.
This CSS styles all links with an href of "#" red:
a[href="#"] {
color: red;
}
for(var i=0; i< vendors.length;i++)
{
var $ul = $("<ul>").attr("data-role", "listview")
.attr("data-divider-theme","a")
.attr("data-inset","true")
.appendTo("#vendorLists");
$("<li>").attr("data-role", "list-divider")
.attr("role","heading")
.text(vendors[i])
.appendTo($ul);
for(var j=0; j<coupons[i].length; j++)
{
var x = coupons[i][j].split(":");
var $li = $("<li>").attr("data-theme", "a")
.appendTo($ul);
$("<a>").text(x[0] + ":" + x[1])
.appendTo($li);
}
}
I am using this code to create a list dynamically by fetching from a array.
vendorList is a div tag
The Jquery isnt coming on these..only the text is being displayed
Plz help
You mention vendorList is a div tag. However, you use appendTo("#vendorLists") in your definition of $ul. Unless you meant vendorLists is a div tag, then you want to use appendTo("#vendorList") instead.
Each time you add a dynamic content to the jQuery Mobile page you need to trigger a specific function meant to enhance page markup.
In your case it is this function:
$('[data-role="listview"]').trigger('refresh');
If you want to read more about that (with live jsFiddle examples) take a look at my other ARTICLE about this topic. Or it can be found HERE.
So, I'm trying to get the text inside of a tag in a list.
Let me say I have something like
<div>text1</div>
<div>text2</div>
<div>text3</div>
<div>text4</div>
<div>text5</div>
<div>text6</div>
so, I want to get the "number" of the DIV who matchs "text4" for example, so it will return a "4".
I cant modify the html, there is no class or ID in the divs.
Maybe I can get the innerHTML of a div? But how will I put all the divs inside a vector or something like that?
Thanks in advance
Here is a way of working with elements by tag name:
var divs = document.getElementsByTagName("div");
for (var i = 0; i < divs.length; i++) {
var html = divs[i].innerHTML;
console.log(html);
}
DEMO: http://jsfiddle.net/DEJty/
In XPath this is
count(//div[.='text4']/preceding-sibling::*) + 1
Incidentally, 'text4' is not "in" any tag; it is between two tags, a start tag and an end tag. I mention this because you will find it easier to understand specifications and error messages if you learn the official vocabulary.