Hello
I wonder how Replace automatically links on my site
that start with:
http://site.com/00000/
to:
http://site.com/11111/
detects> replaces
CSS3 attribute "starts with" selectors help you there (and jQuery supports them on all of the browsers it supports — with native features if possible, for speed). Then just use an each loop and update the href property of the raw a element:
$("a[href^='http://site.com/00000/']").each(function() {
this.href = "http://site.com/11111/" + this.href.substring(21);
});
You can use jQuerys .attr() method. You don't need to explicitly invoke .each(), jQuery will take care of you if your selector hits multiple nodes. Since version 1.4.1, .attr() like many other setters, takes a function as argument. This function gets the index and the actual value passed in. Whatever you return from this callback is going to be the new value.
$(document).ready(function () {
$('a').attr('href', function(_, href) {
return href.replace('246619', '262257');
});
});
Demo: http://www.jsfiddle.net/qR2NU/
Reference: .attr()
<script type="text/javascript">
$(document).ready(function () {
var urlContain = new RegExp('Detect Value Here');
$('a').each(function () {
var href = this.getAttribute('href').replace(urlContain, 'Replacement here');
$(this).attr('href', href);
});
});
</script>
This code loops through every link on the page that has a href attribute once the DOM has loaded and performs the required replace:
$(function() {
$('a').each(function() {
var href = $(this).attr('href');
if (href !== undefined) {
href = href.replace(/246619/g, '262257');
}
$(this).attr('href', href);
});
});
The above relies on jQuery but judging by the tags you used for your question, you are already using it.
Untested:
$("a[href^=http://site.com/00000/]").each(function() {
this.href = "http://site.com/11111/" + this.href.substr("http://site.com/00000/".length");
});
Related
I have this code in my header.php :
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery("a").click(function(){
jQuery("a").attr("target","_blank");
url=jQuery(this).attr('href');
jQuery(this).attr('href','/te3/out.php?l=click&u=' + escape(url));
});
});
</script>
And right now it opens all links in new browser tabs. What I would like is to open only the posts. The permalink looks like mywebsite.com/this-is-the post/ if this helps in any way.
Please help
Thanks
You can filter links with jQuery's .filter() method. Just customize the regular expression to fit your actual needs
jQuery(document).ready(function() {
jQuery("a")
.filter(function() {
var href = jQuery(this).attr('href');
// return true if href exists and matches the regular expression
return href && href.match(/mywebsite\.com\/[\w-]+/);
})
.click(function(){
jQuery("a").attr("target","_blank");
url = jQuery(this).attr('href');
jQuery(this).attr('href','/te3/out.php?l=click&u=' + escape(url));
});
});
Update
If you want the opposite behavior, you can use .not()
jQuery(document).ready(function() {
jQuery("a")
.not(function() {
var href = jQuery(this).attr('href') || '';
// return true if href exists and matches the regular expression
return href.match(/mywebsite\.com\/[\w-]+/);
})
.click(function(){
jQuery("a").attr("target","_blank");
url = jQuery(this).attr('href');
jQuery(this).attr('href','/te3/out.php?l=click&u=' + escape(url));
});
});
I have a problem getting the href attribute of a link. In have the following code in my DOM
$("a").click(function(e) {
e.preventDefault();
myFunction(this);
});
In my linked js file I want to manipule the href attribute, let's say :
function myFunction() {
var hrefValue = $(this).attr("href");
alert(hrefValue );
}
But Is displays 'undefined'.
What am I doing wrong ?
Thanks a lot for your help !
You never accept a parameter in your function!
function myFunction(el) {
var hrefValue = $(el).attr("href");
alert(hrefValue);
}
Try using .call to maintain the context,
myFunction.call(this)
When i click a link i need to send post via ajax. The problem is that the request is dropped because of open a link.
jQuery('#pagination a').click(function(){
jQuery.post('index.php?option=com_component',
{checked_sites_for_session: jQuery('.selected-site input[type="checkbox"]').map(function () {return this.value;}).get()}
).success(function(){window.location = jQuery(this).attr('href')});
console.log(jQuery(this).attr('href'));
return false;
});
But again the problems is (thanks to joomla) in url - its like /~user/joomla/index.php/view-sites?view=sites&page=2 - as you see it starts from slash, but the real link is http://localhost/~user/joomla/index.php/view-sites?view=sites&page=2, but in the source i have <a href="index.php?option=com_component&view=sites&.'.$option.'page='.$left.'"//....`
So i need some "multipurpose domain parsing solution" or just stop joomla changing my url's.
Using the native element.href will get you the entire href including the domain, and not just the attributes value, also there's a scope issue with the this keyword being used inside the $,post function :
$('#pagination a').on('click', function(e){
e.preventDefault();
var self = this;
$.post('index.php?option=com_component',
{checked_sites_for_session: $('.selected-site input[type="checkbox"]').map(function () {
return this.value;
}).get();
}
).success(function(){
window.location = self.href;
});
});
From the links you've posted they don't look to be the same at all, so you might have to figure something out for that, as some CMS solutions use rewriting etc.
problem with this
jQuery('#pagination a').click(function(e){
e.preventDefault();
var me=this;
jQuery.post('index.php?option=com_component',
{checked_sites_for_session: jQuery('.selected-site input[type="checkbox"]').map(function () {return this.value;}).get()}
).success(function(){window.location = jQuery(this).attr('href')});
console.log(jQuery(me).attr('href'));
return false;
});
I'm trying to learn some jQuery, and I setup a test page with the following code:
<a id='encode' href='javascript: void(0)'>encode</a> |
<a id='decode' href='javascript: void(0)'>decode</a> |
<br/>
<textarea id='randomString' cols='100' rows='5'></textarea>
<script type='text/javascript'>
$(document.ready(function () {
$('#encode').click(function() {
$('#randomString').val(escape($('#randomString').val()));
});
$('#decode').click(function() {
$('#randomString').val(unescape($('#randomString').val()));
});
});
</script>
The idea is I can put something in the textarea and click either "encode" or "decode", and it will either escape or unescape what I put into the textarea.
This code works just fine, but my question has to do with how I am changing the value of the textarea. In my code, I am selecting the textarea value twice: once to (un)escape it, and once again to change the value. IMO this seems clunky and maybe unnecessary. I thought maybe I could do something like this instead:
$('#randomString').val(escape(this));
But this seems to refer to the object of the link I clicked, not the #randomString selector, so is there some other magic word I can use to reference that $('#randomString')?
$('#randomString').val(escape(this));
This does not get the object you want. It is effectively the equivalent of doing this:
var foo = escape(this);
$('#randomString').val(foo);
this only means something different when you start a new scope with a function definition.
jQuery does offer this kind of functionality with a callback option:
$('#randomString').val(function (idx, oldVal) {
return escape(oldVal);
});
The second parameter is the current value of the element; the return value sets a new value for the element.
You can try this
$(document.ready(function () {
$('#encode').click(function() {
var $randomString = $('#randomString');
$randomString.val(escape($randomString.val()));
});
$('#decode').click(function() {
var $randomString = $('#randomString');
$randomString.val(unescape($randomString.val()));
});
});
The short answer, if I understand you correctly, is no. There isn't a way to refer to $('#randomString') where you're talking about. It's just a parameter to the val method, so it's just plain JavaScript syntax, no jQuery "magic".
To accomplish the task at hand and make the code cleaner and less clunky, I would save off the jQuery object for #randomString so you don't have to keep creating it:
$(document.ready(function () {
var $rndStr = $('#randomString');
$('#encode').click(function() {
$rndStr.val(escape($rndStr.val()));
});
$('#decode').click(function() {
$('#rndStr').val(unescape($rndStr.val()));
});
});
You could make it a little generic:
$.fn.applyVal = function(func) {
return this.each(function() {
$(this).val( func( $(this).val() ) );
});
};
Then the following call is enough:
$('#randomString').applyVal(escape);
I'm not sure if I need the each() function here or if I can somehow do this with this. I'm trying to switch the src attribute based on the if statement. It works except that it switches them both to hifi1.jpg. How do I make it so it applies each img's data-websrc value to itself?
HTML:
<img class="airsrc" src="lofi1.jpg" data-websrc="hifi1.jpg" alt="example1">
<img class="airsrc" src="lofi2.jpg" data-websrc="hifi2.jpg" alt="example2">
JS:
jQuery(document).ready(function($) {
var airsrc = $('.airsrc');
airsrc.each(function() {
if ( Modernizr.mq('(min-width:480px)') ) {
var src = $(this).data('websrc');
airsrc.attr('src', src);
}
});
});
Update: Solution:
jQuery(document).ready(function($) {
if ( Modernizr.mq('(min-width:480px)') ) {
$('.airsrc').each(function() {
var $this = $(this);
var src = $this.data('websrc');
if ( src != '' ) {
$this.attr('src', src);
}
});
}
});
That works in browsers that support custom data attributes, which from my testing I've found to mean FF/Chrome/Opera/Safari. Maybe IE9. I think getAttribute can be used though for (older) IE.
var $this = $(this),
src = $this.data('websrc');
$this.attr('src', src);
It was applying to both, because you were applying it to the whole jQuery object airsrc.
You had to specifically reference the current element with $(this)
or...
Do it like the above code, which assigns $(this) to $this in order to cache it, for avoiding further lookups. Then you get its data and change its attribute.
You'll want to use this inside the each to get the specific item for that iteration, wrapped in jQuery, of course. With some small optimizations...
jQuery(document).ready(function($) {
if (Modernizer.mq('(min-width:480px)')) {
$('.airsrc').each(function() {
var $this = $(this),
src = $(this).data('websrc');
$this.attr('src', src);
});
}
});
Note that if you check the condition outside the each, you only have to do it once. Also, you can avoid reconstituting the jQuery of this by assigning it to a variable then reusing it.
airsrc.attr('src', src); should be $(this).attr('src', src); and everything will be wonderful
You can make your code a lot shorter by using a feature of the attr method:
jQuery(function($) {
if ( Modernizr.mq('(min-width:480px)') ) {
$('.airsrc').attr('src', function() {
return $(this).data('websrc');
});
}
});