How to select div tag inside an anchor tag. Consider the following HTML.
<a target="_new" href="https://stackoverflow.com/12.mp4"
data-placement="top" rel="tooltip"
title="Video (MP4)" >
<div class="hidden">Interesting 12</div>
</a>
I have to select all anchor tags pointing to video resource. I am able to select the anchor tags. Now How do I select the division inside it and get the text?
$("a").each(function() {
var link = $(this).attr('href');
if (typeof link == "string" && link.indexOf(".mp4") > 0) {
alert(link);
}
})
use .find('div') or .find('.hidden') after your $('a')
http://api.jquery.com/find/
$('a[href*=".mp4"]').each(function() {
alert( this.href );
$(this).find('div.hidden').text();
});
OR
$("a").each(function() {
var link = $(this).attr('href');
if (typeof link == "string" && link.indexOf(".mp4") > 0) {
alert(link);
$(this).find('div.hidden').text();
// OR
$('div.hidden', this).text();
}
});
NOTE
Placing a div within anchor tag is not valid.
$("a").each(function(){
$(this).find('div').each(function(){
....
});
});
use .find()
$("a").each(function() {
var link = $(this).attr('href');
if (typeof link == "string" && link.indexOf(".mp4") > 0) {
alert(link);
}
// get the div
var divText = $(this).find('div').text();
})
$("a").each(function() {
var link = $(this).attr('href');
a=link.length;
var filetype=link[a-3]+link[a-2]+link[a-1]
if(link[a-4] == '.' && filetype=='mp4') //you can check more extensions here using ||.
$(this).find('.hidden').text()
})
Related
I select a span element on the page. For the first click, I want it to link to another page. On the second click, I want it to return to the original page.
For example, I have a link with example.com, which is the original. When this element "abcd" is clicked I want it to link to example.com/ar, and when it's clicked again I want it to go back to example.com.
document.querySelector('span.arb').addEventListener('click', function() {
a.href="example.com";
})
How do I complete this using the above?
you can get link and change her after click
document.querySelector('span.arb').addEventListener('click', toogle)
function toogle(){
if( document.querySelector('span.arb').href === "domain.com"){
document.querySelector('span.arb').href = "domain.com/link"
} else if (document.querySelector('span.arb').href === "domain.com/link"){
document.querySelector('span.arb').href = "domain.com"
}
Hold the link in a data attribute and use that to toggle.
document.querySelector("[data-toggleHref]").addEventListener("click", function(){
//Get the link element
var a = document.querySelector("a");
var current = a;
//Log to demontrate only
console.log(this.dataset.togglehref);
//Update the link
a.href = this.dataset.togglehref;
//Set the data attribute for toggle
this.dataset.togglehref = current;
});
Link
<span data-toggleHref="/pageb.html">Click Me</span>
try this code:
document.querySelector('span.arb').addEventListener('click', function() {
if(a.href == "example.com") {
a.href="example.com/ar";
} else {
a.href="example.com";
}
})
or a shorter answer using ternary operator:
document.querySelector('span.arb').addEventListener('click', function() {
a.href = a.href == "example.com" ? "example.com/ar" : "example.com";
})
Try this:
let count = 0;
document.querySelector('span.arb').addEventListener('click', function () {
count++;
document.querySelector('a').href = "http://example.com";
if (count == 1) {
document.querySelector('a').href = "http://example.com/ar";
} else {
document.querySelector('a').href = "http://example.com";
}
});
Link
<span class="arb">Click Me</span>
I'm making a chrome extension and what I want to happen is to alert the user if a specific link has been clicked on Facebook. And in my script every time I click a link it always alert accessing gma.
$(document).on("click", "a", function() {
//this == the link that was clicked
var href = $(this).attr("href");
if (window.location.protocol == 'https:'){
if(href == "gmanetwork"){
alert("Accessing Gma");
}}
else{
alert("false");
}
});
I would suggest something like this:
You change your html links to :
Your link
and your script:
$(document).on("click", "a", function() {
if($(this).attr("targetLink"){
alert("You are going to the following page: " + $(this).attr("targetLink"));
}
});
Code at Question assigns the value if (window.location.protocol = 'https:'){ "gmanetwork" to href using = operator at
if (href = "gmanetwork")
instead of checking the values for equality, use === operator
if (window.location.protocol === 'https:') {
if (href === "gmanetwork") {
alert("Accessing Gma");
}
}
I'm looking for a way to rewrite URL of the location when the user want's to change page. So, let's say you have something like this:
<body>
<a href="http://example.com" />
</body>
Is there a way I can catch URL changing moment, and actually modify that URL before location is changed, for example I would like to change href into relative link like \http://example.com and redirect page actually there.
If you just want to trap the link and then modify it then yes, that's quite simple...
$("a").on("click", function(e) {
e.preventDefault(); // stops the link doing its default thing
window.location.href = "something/" + $(this).attr("href");
});
You obviously need to modify the line that changes the location, so that it modifies the href value however you need. I'd also recommend giving the links a class and selecting them with that, as the above code will affect every link on the page.
Finally, this will need to run after the DOM is loaded, so either wrap it in a document.ready handler of your choice, or put it in a script at the bottom of the body.
Demo
You can work from here. Also you will need urlrewrite in htaccess for this to work properly.
$(function () {
$('.buttonn').on('click', function (e) {
var seperator = (window.location.href.indexOf("?") === -1) ? "?" : "&";
if (window.location.href.indexOf("s1") === -1 && window.location.href.indexOf("s2") != -1) {
window.location.href = window.location.href.replace(/&?s2=([^&]$|[^&]*)/i, "&s1=s1");
} else if (window.location.href.indexOf("s1") != -1) {
window.location.href = window.location.href.replace(/&?s1=([^&]$|[^&]*)/i, "&s1=s1");
} else {
window.location.href = window.location.href + seperator + "s1=s1";
}
});
});
$(function () {
$('.buttono').on('click', function (e) {
var seperator = (window.location.href.indexOf("?") === -1) ? "?" : "&";
if (window.location.href.indexOf("s2") === -1 && window.location.href.indexOf("s1") != -1) {
window.location.href = window.location.href.replace(/&?s1=([^&]$|[^&]*)/i, "&s2=s2");
} else if (window.location.href.indexOf("s2") != -1) {
window.location.href = window.location.href.replace(/&?s2=([^&]$|[^&]*)/i, "&s2=s2");
} else {
window.location.href = window.location.href + seperator + "s2=s2";
}
});
});
So I have a simple jquery code to highlight the nav menu.
$(document).ready(function(){
$('#header .mm a').each(function(){
if( $(this).attr('href') == window.location.href ){
$(this).addClass('active');
}
var value = window.location.href.substring(window.location.href.lastIndexOf('/') + 1);
if( $(this).attr('href') == '/site/' && (value == '') ){
$(this).addClass('active');
}
});
});
On this page right here: http://perfectlanding.com.au/creativity
I have no idea why the code won't run. There are no errors in the console.
The code isn't inside a script tag. Fix that and it should work fine.
Looking at the page source, the script in question isn't between any tags. You can see it being emitted at the bottom of the page below the page's footer.
Copy paste this:
<script type="text/javascript">
$(document).ready(function(){
$('#header .mm a').each(function(){
if( $(this).attr('href') == window.location.href ){
$(this).addClass('active');
}
var value = window.location.href.substring(window.location.href.lastIndexOf('/') + 1);
if( $(this).attr('href') == '/site/' && (value == '') ){
$(this).addClass('active');
}
});
});
</script>
I had this problem:
I was trying to do the Twitter Effect, so when you click on it,
checks if it's either :first or :last, and if it isn't, create a
margin-top and margin-bottom just like in Twitter's Timeline. I
want to create this effect when clicking in any of "One phrase here".
The main problem was that my jQuery code doesn't detect :first and
:last. I already tried also with :first-child and it did the same.
Using this HTML code:
<div class="phrases-container">
<div class="phrases-title">Titulo</div>
<div class="phrases-list">
<div class="phrases-item zooming">First child</div>
<div class="phrases-item zooming">One phrase</div>
<div class="phrases-item zooming">One phrase</div>
<div class="phrases-item zooming">Last child</div>
</div>
<div class="phrases-load-more">
<a class="link loadMore">Get more phrases!</a>
</div>
</div>
Using this jQuery code, I could fix it. Thanks for your help! (:
$(".zooming").live('click', function(){
var $z = $('.zooming');
index = $z.index(this);
var bradiust = $(this).css("borderTopLeftRadius");
if (bradiust == '0px')
var thand = "show";
else
var thand = "hide";
if (thand == "show"){
if (index == 0 ){
alert("This is the first");
}else
if (index == ($z.length-1)){
alert("This is the last");
}else{
alert("This is just another");
}
}else{
if (index == 0 ){
alert("This is the first");
}else
if (index == ($z.length-1)){
alert("This is the last");
}else{
alert("This is just another");
}
}
});
I'm not quite sure what is wrong with :first, but how about this:
var $z = $('.zooming'),
index = $z.index(this);
if (index == 0 || index == ($z.length-1)) {
return false;
}
$(document).on('click', '.zooming', function(){
var L = $('.zooming').length-1;
var I = $(this).index();
if (I===0 || I==L) {
return false;
}else{
var bradiust = $(this).css("borderTopLeftRadius");
if (bradiust == '0px') {
var thand = "show";
}else{
var thand = "hide";
}
alert(thand);
}
});
Don't be fooled by the :first jquery selector:
Description: Selects the first matched element.
The :first pseudo-class is equivalent to :eq(0)
You have to use the :first-child selector
What about combining:
if ($(this).is(':first') || $(this).is(':last'))
But notice:
http://api.jquery.com/is/
Starting with jQuery 1.7, selector strings with positional selectors
apply the selector against the document, and then determine whether
the first element of the current jQuery set matches any of the
resulting elements. So for the HTML shown above, an expression such as
$("li:first").is("li:last") returns false.