I have many links from the same web but with different dirreciones
<a href="somelink.com/1" title="this link">
</a>
<a href="somelink.com/2" title="this link">
</a>
<a href="somelink.com/3" title="this link">
</a>
<a href="somelink.com/3" title="this link">
</a>
He tried to use the code but it does not work for me since he searches for a specific url and not all
var a = document.querySelector('a[href="somelink.com"]');
if (a) {
a.setAttribute('href', 'replacedlink.com')
}
<a href="somelink.com" title="this link">
</a>
How could I do it in a massive way and do it to all the url of a web site in estecifico for example: somelink.com
You could use an attribute selector ^= to check if the href starts with somelink.com. Then you could replace the url :
document.querySelectorAll('a[href^="somelink.com"]').forEach(
x => x.href = x.href.replace("somelink.com", "replacedlink.com")
);
<a href="somelink.com/1" title="this link">a
</a>
<a href="somelink.com/2" title="this link">b
</a>
<a href="somelink.com/3" title="this link">c
</a>
<a href="somelink.com/3" title="this link">d
</a>
<a href="otherlink.com/3" title="this link">e
</a>
If you want to replace the whole link, you could set the href attribute to the new link:
document.querySelectorAll('a[href^="somelink.com"]').forEach(
x => x.href = "replacedlink.com"
)
<a href="somelink.com/1" title="this link">a
</a>
<a href="somelink.com/2" title="this link">b
</a>
<a href="somelink.com/3" title="this link">c
</a>
<a href="somelink.com/3" title="this link">d
</a>
<a href="otherlink.com/3" title="this link">e
</a>
Try adding class to the links and then use get element by class and replace the link
my url
var i=document.getElementByClass("abc");
for(let j=0;j<i.length;j++){
i[j].href='newUrl';
}
For multiple items we can replace this way:
var a = document.querySelectorAll('.your_attr_class').forEach( (item)=>{
if(item.href.startsWith('http://somelink.com')){
item.href.replace('http://somelink.com','http://replacewith.com');
}
});
Related
iam a Django BackEnd Developer and i have created a Blog
i just want to know how to color slected Arrow after user Vote for specific Post and save it
this is Arrow Html:
<a href="{% url 'home:post-vote-up' id=posts.id %}">
<i class="fas fa-arrow-up"></i>
</a>
<p class="lead">{{posts.votes}}</p>
<a href="{% url 'home:post-vote-down' id=posts.id %}"
<i class="fas fa-arrow-down"></i>
</a>
Just add an ID and an onclick function for the element you want to select with JS and after you selected it, change it's color:
function arrowClickUp() {
document.getElementById("arrowUp").style.color = "red";
}
function arrowClickDown() {
document.getElementById("arrowDown").style.color = "red";
}
<a href="{% url 'home:post-vote-up' id=posts.id %}">
<i onclick="arrowClickUp()" id="arrowUp" class="fas fa-arrow-up"></i>
</a>
<p class="lead">{{posts.votes}}</p>
<a href="{% url 'home:post-vote-down' id=posts.id %}">
<i onclick="arrowClickDown()" id="arrowDown" class="fas fa-arrow-down"></i>
</a>
Note: you should link the font library you using to you snippet, because you'll see nothing
I am trying to get value of linl which is generated from db using while loop.
When I prees on the link it should show alert window with its name.
while($trackResultRow = mysqli_fetch_assoc($trackResult)){?>
<li>
<a href="#" class="rem"
data-userid="<?php echo $trackResultRow['username']?>"
data-track="<?php echo $trackResultRow['track_name']?>">
<span class="glyphicon glyphicon-thumbs-down pull-right"></span>
</a>
<a href="<?php echo $trackResultRow['track_path']?>">
<span><?php echo $trackResultRow['username']?></span> -
<span><?php echo $trackResultRow['track_name']?></span>
</a>
<hr/>
</li>
<hr>
<?php
}
?>
And Jquery code
$(function() {
$(".rem").on("click", function(e) {
e.preventDefault();
var $link = $(this), // save for later
username = $(this).data("userid"),
track = $(this).data("track");
return alert (username);
});
});
But it does not work....Can anybody help me to fix this code?
You code is working for me, however I noticed that your two anchor tags are very close to each other. Are you adding event listener to first anchor tag and clicking on second? See example code below
$(function() {
$(".rem").on("click", function(e) {
e.preventDefault();
var $link = $(this), // save for later
username = $link.data("userid"),
track = $link.data("track");
return alert(username);
});
});
.glyphicon:after {
content: 'Icon'
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<ul>
<li>
<a href="#" class="rem" data-userid="USERNAME" data-track="TRACK_NAME">
<span class="glyphicon glyphicon-thumbs-down pull-right "></span>
</a>
<a href="track_path">
<span>username</span> -
<span>track_name</span>
</a>
<hr/>
</li>
<li>
<a href="#" class="rem" data-userid="USERNAME" data-track="TRACK_NAME">
<span class="glyphicon glyphicon-thumbs-down pull-right "></span>
</a> -
<a href="track_path">
<span>username</span> -
<span>track_name</span>
</a>
<hr/>
</li>
</ul>
I am trying to add context menu but value is not populating.
<div class="m-l">
<a class="item-country text-orange" href="#/app/CountryIps/{{item.data['name']}}/cCode/{{item.data['country-code']}}" target="_blank">
{{item['data']['name']}}
</a>
<a class="item-ip" href="#/app/showIps/{{item.data['name']}}/ip/{{item.data['Ip']}}" target="_blank"><span context-menu="whiteList"> {{item.data['Ip']}}</span> </a>
{{item.data['type']}}
<a class="detail-icon" data-popup-open="popup-1" href="" ng-click="showModal(item)">
<i class="fa fa-info-circle"></i>
</a>
</div>
Javascript
$scope.whiteList = [
['Add to white list', function($itemScope, $event, ip) {
whiteList(ip);
}]
];
Now when I add context from template I got undefined in ip in controller.
<a onClick="window.location.href='your link'">
I fixed it by myself to checking values of the $itemscope.
$itemScope.$parent.item.data.Ip
To get the value of the IP from template to controllers.
A quick question, how can I get the link to refer to post.id, this what I have not dosn't work. post.id has a existing value.
{{post[0].title}}</h2>
There is ngHref for this kind of use:
Examples:
<input ng-model="value" /><br />
<a id="link-1" href ng-click="value = 1">link 1</a> (link, don't reload)<br />
<a id="link-2" href="" ng-click="value = 2">link 2</a> (link, don't reload)<br />
<a id="link-3" ng-href="/{{'123'}}">link 3</a> (link, reload!)<br />
<a id="link-4" href="" name="xx" ng-click="value = 4">anchor</a> (link, don't reload)<br />
<a id="link-5" name="xxx" ng-click="value = 5">anchor</a> (no link)<br />
<a id="link-6" ng-href="{{value}}">link</a> (link, change location)
Source (Angular docs).
I have got to build a carousel dynamically from two arrays, as follows:
var arrayBarcode = [123456789, 234567891, 345678912];
var arrayPath = [/assets/image1.jpg, /assets/image2.jpg,/assets/image3.jpg];
To start with, i only have the div class flexslider
I need to build my ul li so that my final html outputs the following:
<div class="flexslider">
<ul class="slides">
<li ean="123456789">
<img src="/assets/image1.jpg" alt="pix" draggable="false">
<a data-statsaction="coupon-basket-remove" data-statscategory="coupon-buttons" title="Remove" href="#">
<i aria-hidden="true" class="icon icon-close-neg">
<span class="sr-only">Remove</span>
</i>
</a>
</li>
<li ean="234567891">
<img src="/assets/image2.jpg" alt="pix" draggable="false">
<a data-statsaction="coupon-basket-remove" data-statscategory="coupon-buttons" title="Remove" href="#">
<i aria-hidden="true" class="icon icon-close-neg">
<span class="sr-only">Remove</span>
</i>
</a>
</li>
<li ean="345678912">
<img src="/assets/image3.jpg" alt="pix" draggable="false">
<a data-statsaction="coupon-basket-remove" data-statscategory="coupon-buttons" title="Remove" href="#">
<i aria-hidden="true" class="icon icon-close-neg">
<span class="sr-only">Remove</span>
</i>
</a>
</li>
</ul>
Please note that the first item in arrayBarcode matches with the first item in arrayPath, etc..
Any help would much be appreciated..
Thanks..
Try this
var arrayBarcode = [123456789, 234567891, 345678912];
var arrayPath = ['/assets/image1.jpg', '/assets/image2.jpg','/assets/image3.jpg'];
var output='<ul class="slides">';
for(var i in arrayBarcode)
{
output+='<li ean="'+arrayBarcode[i]+'">\
<img src="'+arrayPath[i]+'" alt="pix" draggable="false">\
<a data-statsaction="coupon-basket-remove" data-statscategory="coupon-buttons"\ title="Remove" href="#">\
<i aria-hidden="true" class="icon icon-close-neg">\
<span class="sr-only">Remove</span>\
</i>\
</a>\
</li>';
}
output+='</ul>';
$('.flexslider').empty().append(output);
DEMO
Looping through a JavaScript Array is pretty simple. Think about visiting each index of arrays and assign them or a better approach, append to our UL with class slides
First answer was good but not enough since using FOR-IN for Arrays is a bad practice, of course you could choose by having all List Items inside a local variable (as Sridhar R's example) or by append individually.
Here is sample code, didn't tested:
var arrayBarcode = [123456789, 234567891, 345678912],
arrayPath = [/assets/image1.jpg, /assets/image2.jpg,/assets/image3.jpg],
$slides = $('.slides'); // If only one single class available on your HTML Doc
if (arrayBarCode.length != arrayPath.length)
{
console.log('Both array should be the same size');
return;
}
for (var i = 0; i < arrayBarcode.length; i++)
{
var html= '<li ean="' + arrayBarcode[i] + '">\
<img src="' + arrayPath[i] + '" alt="pix" draggable="false">\
<a data-statsaction="coupon-basket-remove" data-statscategory="coupon-buttons" title="Remove" href="#">\
<i aria-hidden="true" class="icon icon-close-neg">\
<span class="sr-only">Remove</span>\
</i>\
</a>\
</li>';
$slides.append(html);
}
Roughly, it would look as below:
$('div.flexslider').append('<ul class="slides"></ul>');
var aElement = $('<a data-statsaction="coupon-basket-remove" data-statscategory="coupon-buttons" title="Remove" href="#">
<i aria-hidden="true" class="icon icon-close-neg">
<span class="sr-only">Remove</span>
</i>
</a>');
$.each(arrayBarcode, function(index, value){
var liElement = $('<li></li>').attr('ean', value);
var imgElement = $('<img alt="pix" draggable="false">').attr('src', arrayPath[index]);
liElement.append(imgElement).append(aElement.clone());
$('ui.slides').append(liElement);
});
Plus, the array arrayPath is missing "":
var arrayPath = ['/assets/image1.jpg', '/assets/image2.jpg','/assets/image3.jpg'];