Jump to anchor tag after clone

Question

Hi all,

I have these hyperlink which will jump to anchor tags in UL some where

<a href="#A">A</a>
<a href="#B">A</a>
<a href="#C">A</a>

<ul>
<li><a name="A"></a></li>
<li><a name="B"></a></li>
<li><a name="C"></a></li>
</ul>

This is to make sure I jump to the right alphabetical letter in the list (which is long and will have scroller). The problem I have is that this is clone when document ready (requirement of the website for different purpose - cannot change here). So after the clone there are 2 sets of anchor tags doing the same thing. I can change the ID of on the clone but not the inner . The result I want is that when click on A or B or C, it will make the jump in the new clone instead

How to solve this problem? If there is a way to avoid using these anchor tag, it is fine too. I think jQuery has a way to jump to specific selector, right? Let me know.

Thanks

Answer 1

In the same function where you create the clone also remove the name attribute from the LI elements of the original.

Answer 2

You can dynamically change the name attribute of the cloned elements:

$(function() {
    names = ['A', 'B', 'C'];

    $.each(names, function(i, name) {
        $("[name='" + name + "']")[1].name = name + "2";
    });
});

Then you can jump to "#A2" for example.

Answer 3

The jQuery ScrollTo plugin could solve your problem.

jQuery.ScrollTo

Related: JQuery focus

Or you could add this script:

clone.find("a[href^=#]").each(function() {
    var anchor = $(this);
    var name = anchor.attr("href");
    anchor.attr("href", name + "_1");
    clone.find("a[name=" + name.substring(1) + "]").attr("name", name.substring(1) + "_1");
});