3

I am trying to figure out why the iOS Safari browser won't apply a href alteration, like it does on a desktop browser. So far, I have tried .attr() and .prop(), but neither one seems to apply the URL adjustment.

To be more descriptive, I am trying to replace the href location of the last linked element in a row of 4 elements.

As of now, the generated HTML appears something like this:

<a href="http://www.URL.com/link-to-img-url-1">[LINK TO IMAGE 1]</a>
<a href="http://www.URL.com/link-to-img-url-2">[LINK TO IMAGE 2]</a>
<a href="http://www.URL.com/link-to-img-url-3">[LINK TO IMAGE 3]</a>
<a href="http://www.URL.com/link-to-img-url-4">[LINK TO IMAGE 4]</a>

But I would like for the fourth link to have a different URL applied, like so:

<a href="http://www.DIFFERENTURL.com/">[LINK TO IMAGE 4]</a>

Here is a full snippet example (the image links are just placeholders):

$(document).ready(function() {
  $("a:last").attr("href", "http://www.google.com/");
});
a {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="http://www.URL.com/link-to-img-url-1">[LINK TO IMAGE 1]</a>
<a href="http://www.URL.com/link-to-img-url-2">[LINK TO IMAGE 2]</a>
<a href="http://www.URL.com/link-to-img-url-3">[LINK TO IMAGE 3]</a>
<a href="http://www.URL.com/link-to-img-url-4">[LINK TO IMAGE 4]</a>

And these are some other scripts I've tried implementing, so far:

With .attr() / NOT working on iOS:

$(document).ready(function(){
    $("#instafeed a:nth-child(4)").attr("href", "http://www.DIFFERENTURL.com/");
});

With .prop() / NOT working on iOS:

$(document).ready(function(){
    $("#instafeed a:nth-child(4)").prop("href", "http://www.DIFFERENTURL.com/");
});

With :eq(3) + .attr() / NOT working on iOS:

$(document).ready(function(){
    $("#instafeed a:eq(3)").attr("href", "http://www.DIFFERENTURL.com/");
});

With [0].href / NOT working on iOS:

$(document).ready(function(){
    $('#instafeed a:last')[0].href = 'http://www.DIFFERENTURL.com/';
});

With replaceWith (Method 1) / NOT working on iOS

$(document).ready(function(){
    $('#instafeed a').last().replaceWith('http://www.DIFFERENTURL.com/');
});

With replaceWith (Method 2) / NOT working on iOS:

$(document).ready(function() {
  $("#instafeed a:last").show(function() {
    var before = $(this).attr('href');
    var replacewith = "https://DIFFERENTURL.com/";
    var after = before.replace(before, replacewith);
    $(this).attr("href", after);
  });
});
nrweb
  • 211
  • 3
  • 15
  • 2
    You should use using `.attr()` instead of `.prop()`, so your first approach should technically work. Are you sure that `#instafeed a:nth-child(4)` is selecting the element as intended? It only works if all the anchor elements are in the same parent. Otherwise, you are probably have to look at using `.index(3)` instead. – Terry Jul 01 '18 at 18:39
  • Thanks for the advice. I just tried this: `$(document).ready(function(){$("#instafeed a:eq(3)").attr("href", "http://www.DIFFERENTURL.com/");});` Again, works in desktop browsers, but not in iOS... – nrweb Jul 01 '18 at 18:56
  • Have you tried plain old JavaScript? See my answer. – zer00ne Jul 01 '18 at 19:29
  • @zer00ne Thanks, I have viewed your answer; though, I was thinking this could be accomplished with JQuery, can it not? – nrweb Jul 01 '18 at 19:34
  • On which iOS version did you test this? Your shown snipped (the one right after `Here is a full snippet example (the image links are just placeholders):`) works fine here on iOS 11, the last link opens google. For sure not on SO because for the iframe restrictions, but on a standalone page it does. – t.niese Jul 02 '18 at 18:37
  • 1
    I did another test with iOS 8.1 and even there it works as expected. – t.niese Jul 02 '18 at 18:46
  • @zer00ne I first tested it with iOS 11. And there it works with all 11.1, 11.2, 11.3 and 11.4, acutally every code the OP posted does what it should do. All of them (except the `With replaceWith (Method 1)` ) change the link and a tab on it does open that newly assigned link. I'm pretty sure that the problem is somewhere else. – t.niese Jul 02 '18 at 19:05
  • @zer00ne When solving the problem it would be helpful not to make arbitrary assumptions without a basis but to test objectively. – t.niese Jul 02 '18 at 19:15
  • @nrweb What does Safari on iOS show if you write `$(function() { var oldLink = $("a:last").attr("href"); $("a:last").attr("href", "http://www.google.com/"); alert($("a:last").length+' '+oldLink+' '+$("a:last").attr('href')); })` for your `full snippet example`. – t.niese Jul 02 '18 at 19:18

0 Answers0