is it possible with jquery to use DOM to find an a link inside a div, such as
<div id="something">
<a href="somewhere" title="something">
<img>
</a>
</div>
and append a datum to the link - in my case a google events tag:
onClick="_gaq.push(['_trackEvent', ' PDF Downloads', ‘Click', 'SEO For Beginners');"
dynamically to the a link so that the end result would be:
<div id="something">
<a href="somewhere" title="something" onClick="_gaq.push(['_trackEvent', ' PDF Downloads', ‘Click', 'SEO For Beginners');">
<img>
</a>
</div>
thank you for your time; any help would be greatly appreciated
let tag = $('#something').find('a');
tag[0].onClick = "_gaq.push(['_trackEvent', ' PDF Downloads', ‘Click', 'SEO For Beginners')";
you find the div you need by id, and by using function find() you serach your a tag.
After that you just refer to the DOM object of your tag by tag[0] and set onClick whatever you like.
It would be better if you just catch desired element with selector and bind a function to it, instead of binding a function directly in DOM.
$('#something a').click(function() {
_gaq.push(['_trackEvent', ' PDF Downloads', 'Click', 'SEO For Beginners']);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="something">
<a href="somewhere" title="something">
<img>
</a>
</div>
Related
I am trying to dynamically append a string to href using jquery 'attr'. I am not able to understand why the below code that I wrote is appending the string twice in existing href. Please help. I have read a lot many articles but unfortunately not help.
var olduri = $('a.link').attr("href");
$('a.link').attr("href", olduri + 'www.google.com');
HTML code is:
<div>
<a class="link" target="_blank" title="Welcome" href="https://example.com?redirect=www.test.com&">
Click</a>
</div>
Result is:
https://example.com?redirect=www.test.com&www.google.comwww.google.com
www.google.com is coming twice. Please help me get it fixed.
I don't quite understand why you want the & as the only separator for these but my suggestion for a cleaner approach is to update the search property not the attribute
$('a.link').prop("search", function(i, curr){
return curr + 'www.google.com';
});
console.log($('a.link')[0].href)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<a class="link" target="_blank" title="Welcome" href="https://example.com?redirect=www.test.com&">
Click</a>
</div>
Your code just works fine. See here. Also a bit of context would really help. Are you planning to append the url onclick event?
$('.showUri').text($('a.link').attr("href"));
$('a.link').on('click', function(e){
e.preventDefault();
var oldUri = $(this).attr('href');
$(this).attr('href', oldUri + 'www.google.com');
$('.showUri').text($('a.link').attr("href"));
});
<div>
<a class="link" target="_blank" title="Welcome" href="https://example.com?redirect=www.test.com&">
Click</a>
</div>
<p class="showUri"></p>
Need to pass information from one class to another in a way that will validate. Current approach is a mess- works but does not validate.
I need to pass text inside a p tag to another element on the page. Right now i'm using a tag attributes to pass this info along. Super messy.
<div class="element-item">
<div class="text-panel">
<div class="text-cell">
<a class="ajax" href="ajax/bkdesks.html" id="Brooklyn Desks" dir="BROOKLYN, NY">
<p class="link"><img src="img/chainlink.png" width="60" height="60" alt="link" alt=""/></p>
<p class="name">Brooklyn Desks</p>
<p class="dir">Brooklyn, NY</p>
</a>
</div>
</div>
And then jQuery:
$('.ajax').click(function(e) {
e.preventDefault();
$('#projects-head .titlehead').text($(this).attr('id'));
$('#projects-head .subhead').text($(this).attr('dir'));
$('#project').load($(this).attr('href'));
});
titlehead and subhead are the other elements on the page whose content is being replaced. I would much rather grab the contents of the p tags below than put everything in the a id & dir. But i cant figure out the jquery to target them.
The p.name and p.dir elements are descendant elements of the clicked .ajax element so you can use .find()
$('.ajax').click(function (e) {
e.preventDefault();var $this = $(this);
$('#projects-head .titlehead').text($(this).find('.name').html());
$('#projects-head .subhead').text($(this).find('.dir').html());
$('#project').load($(this).attr('href'));
});
I'm trying to get the src of the image, but the div is dynamic, then appears several times on the page, when I click on the DIV, he always gets the first frame and not the DIV clicked, how can I use $(this) correctly? Follows the code I'm using:
<section class="clientes" role="region">
<a href="" title="Cliente" class="group">
<img src="img/image01.jpg" alt="" />
<h2>The title</h2>
<p>content here</p>
</a>
</section>
<script>
$("body").on("click", ".clientes", function(){
var pega = $(".clientes .dsp-none img").attr('src');
$(this).find("a").attr("href", pega);
})
Take advantage of the fact that jQuery arranges for this to refer to the clicked DOM element:
var pega = $(this).find(".dsp-none img").attr('src');
You may or may not want to use .prop("src") instead of .attr().
My generated portion of page source is
<a target="_blank" href="/img/image001.png">
<img width="286" height="171" alt="" src="/img/image001.png">
</a>
and I need on page load to replace this a target with a rel so above link should be
<a rel="lightbox" href="/img/image001.png">
<img width="286" height="171" alt="" src="/img/image001.png">
</a>
I trid with after </body>
<script>
$(function() {
$('a[_blank]').removeAttr('_blank').attr("rel=","lightbox");
});
</script>
You need to use the attribute equals selector - you need to use the attribute name along with attribute value, also to remove you need to use the attribute name not value.
$('a[target="_blank"]').removeAttr('target').attr("rel","lightbox");
Your code looks for an anchor element with attribute _blank and then removes it, a anchor element like <a _blank href="/img/image001.png">
Also as #PaulDraper suggested move the script inside the body element
$(document).ready({
$('a[target=_blank]').attr('rel', 'lightbox');
})
i have this code:
<a href='google.com' title=' '> <script>exam='y';</script> </a>
I want to add this script <script>exam='y';</script> inside title tag, like this:
<a href='google.com' title=' <script>exam='y';</script> '> <script>exam='y';</script> </a>
But it does not work. Hope for your helps.
Put your javascript separate in script tag and then point to your element attribute to set it
<a id="myId" href='google.com' title=''> my link </a>
window.onload = function () {
document.getElementById("myId").setAttribute("title", "some title");
}
fiddle: http://jsfiddle.net/djwave28/rHddx/1/
If you set your title dynamically, you do not need the attribute in the tag. It will be set by javascript, as thfollowing fiddle will show you.
http://jsfiddle.net/djwave28/rHddx/2/