<a class="some" id="1" href="/s/1/2">link 1</a>
<a class="some" id="2" href="/s/2/3">link 1</a>
<script>
$(document).ready(function() {
$('.some').click(function() {
var id = this.id;
var link = $(this).css('href');
alert(id);
alert(link);
return false;
});
});
</script>
When I click on the link I get correct id, but "undefined" link. What is the problem and how can I fix it?
Change
var link = $(this).css('href');
to
var link = $(this).attr('href');
.css() is used to get/set CSS properties, .attr() is used to get/set attributes on elements.
You need to access the elements attribute, not CSS property :-)
var link = $(this).attr('href');
Use attr():
var link = $(this).attr('href');
Or simply:
var link = this.href;
Your code should look like:
$(document).ready(function() {
$('.some').click(function() {
var id = this.id;
var link = this.href;
alert(id);
alert(link);
return false;
});
});
Related
I would like to know how to clear my href queries after a click event.
All what I need is if I click my button again it should clear old queries and add new ones to href.
click(function() {
//adds some queries to href
var a_href = $('.link').attr('href');
myArray.forEach(function(index){
a_href = a_href + index;
$('.link').attr('href', a_href)
});
});
example:-
default status: href="www.example.com/_size-"
old href: href="www.example.com/_size-xs.m.l"
new href should overwrite the old one: href="www.example.com/_size-l.xl.xxl
If I understand correctly you're looking for something like this:
var myArray = ["xs.m.l", "l.xl.xxl"];
var currentIndex = 0;
$('#btn').click(function() {
var a_href = $('.link').attr('href');
a_href = a_href.replace(/(size\-)(.*)$/,"$1"); // remove previous "query"
a_href = a_href + myArray[currentIndex % myArray.length]; // add the new "query"
$('.link').attr('href', a_href);
$('.link').text(a_href)
currentIndex++;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn">Change Link</button><a class="link" href="www.example.com/_size-">www.example.com/_size-</a>
Maybe this will help?
Click Me!
<script>
$('.my_link').click(function (e)
{
e.preventDefault();
$(this).attr('href', '#another_link');
});
</script>
I have this in HTML:
<a class="clickImage" href="http://domain.com/a_0_full.jpg" data-lightbox="group">initialize</a>
<a class="imageZoom" href="http://domain.com/a_0_full.jpg"></a>
<a class="imageZoom" href="http://domain.com/a_1_full.jpg"></a>
I want to give different data-lightbox (noGroup) for a.imageZoom with same href as a.clickImage and same data-lightbox (group) with different href.
this is what I tried:
$(document).ready(function() {
$(".clickImage").click(function() {
var addressValue = $(this).attr("href");
$(".imageZoom").attr('data-lightbox','group');
if($('.imageZoom').attr('href') == addressValue) {
$(this).attr('data-lightbox','noGroup');
}
});
});
from what I understand, it gives noGroup to all links with a.imageZoom.
What I'm doing wrong?
You need to use .filter() for filtering out element that have same href as that in variable addressValue. and then set the attribute data-lightbox as no-Group to them:
$('.imageZoom').filter(function(){
return $(this).attr('href') == addressValue;
}).attr('data-lightbox','noGroup');
Might be this way:
$(".clickImage").click(function() {
var addressValue = $(this).attr("href");
$(".imageZoom").attr('data-lightbox', function(i) {
return (addressValue == $(this).attr('href')) ? "noGroup" : "group";
});
return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="clickImage" href="http://domain.com/a_0_full.jpg" data-lightbox="group">initialize</a>
<a class="imageZoom" href="http://domain.com/a_0_full.jpg">one</a><!--applies noGroup to this.-->
<a class="imageZoom" href="http://domain.com/a_1_full.jpg">two</a>
How can I do that for every 'a' tag in a page. My goal is to use this for Google search results to access results without google redirection (used in the href attribute) since the actual link is stored in the data-href attribute. So using Tampermonkey with the following script didn't work, and I don'k know why:
$('body').append('<input type="button" value="Fix Href Attributes" id="GG">');
$("#GG").css("position", "fixed").css("top", 18).css("left", 770);
$('a').each(function(){
var $currentA = $(this);
var dataHref = $currentA.attr('data-href');
$currentA.attr('href',dataHref);
});
How can I do this?
Your code updating the elements is correct, you're just firing it too soon. Fire it in response to the button being clicked:
$('body').append('<input type="button" value="Fix Href Attributes" id="GG">');
$("#GG").css("position", "fixed").css("top", 18).css("left", 770).on("click", function() {
$('a').each(function() {
var $currentA = $(this);
var dataHref = $currentA.attr('data-href');
$currentA.attr('href', dataHref);
});
});
There is, of course, no reason you need to give it an ID and look it up after appending it:
$('<input type="button" value="Fix Href Attributes">')
.css({
position: "fixed",
top: 18,
left: 770
})
.on("click", function() {
$('a').each(function() {
var $currentA = $(this);
var dataHref = $currentA.attr('data-href');
$currentA.attr('href', dataHref);
});
})
.appendTo(document.body);
How can I get the id of an <li> on click on its child anchor <a> in a structure like shown below? :
<li id="idx"><h5><a class="trigger" href="#"></a></h5></li>
How can I return "idx" using jquery?
$(document).on("click", "a.trigger", function(event){
event.preventDefault();
var anchor = $(this);
var id = anchor.closest("li").attr("id");
console.log(id);
});
Running example: http://jsfiddle.net/nRaa4/
$('.trigger').on('click', function(e) {
e.preventDefault();
var ID = $(this).closest('li').attr('id');
})
I need to get value from a href button. Here I have just developed a code which show all href value. Actually I need to get value from where I click.
here is my code
$(document).ready(function() {
$("a.me").click(function(){
var number = $('a').text();
alert(number);
});
});
You should do
$(document).ready(function() {
$("a.me").click(function(){
//It's not clear if you want the href attribute or the text() of the <a>
//this gives you the href. if you need the text $(this).text();
var number = this.href;
alert(number);
});
});
$("a.me").click(function(){
var number = $(this).attr('href');
alert(number);
});
In jQuery you can use $(this) to reference the element that was clicked (or otherwise used)
Like so:
$("a.me").click(function(){
var number = $(this).text();
alert(number);
});
var number = $(this).attr('href');
$(document).ready(function() {
$("a.me").click(function(){
var target=$(this).attr("href");
alert(target);
});
});
one of the answers above will work or you could use
...
$("a.me").click(function(e){
var number = $(e.target).text();
alert(number);
});