Question

I’m not sure if this is a jquery, javascript or simply a quirk in the browser but consider this code:

for(rowIdx=0;rowIdx<theResultSet.rows.length;rowIdx++) {
  thisLine = $("#TestTemplateLI").clone().attr({'id':'test_'+rowIdx}).appendTo("#test_exerciseListUL");
  thisLine.find('[href*="#pageExercise_EXERCISENUMBER"]').each( function(i) {this.href = this.href.replace('EXERCISENUMBER', rowIdx)} );
}

The goal of the code above is to clone a list item (<LI>, embedded below) HTML fragment, modify it to address an anchor elsewhere on the page and then insert it into an unordered list (<UL>). All that works using the wonders of jquery. The problem is that once it’s been modified, the anchor doesn’t seem to work. Moreover after I mod the HREF programattically, it returns a full URL, not just an anchor reference. Example:

<UL id='testTemplate' style="display:none"> 
    <LI class='arrow' id='testTemplateLI'>
        <a href='#pageExercise_EXERCISENUMBER'>  <!-- THIS is the beast in question -->
            <DIV class='LABELCLASS test_labelContainer'>
                <TABLE height=100% width=100%>
                    <TR valign='center'><TD align='center'>EXERCISELABEL</TD></TR>
                </TABLE>
            </DIV>
            <IMG id='test_checkmark_EXERCISENUMBER' class='test_checkMark_off' src="assets/checkmark.png" width=60px height=54px>
            <DIV id='test_item_EXERCISENUMBER' class='test_exNameContainer'>
                <TABLE height=100% width=100%>
                    <TR valign='center'><TD>EXERCISENAME</TD></TR>
                </TABLE>
            </DIV>
        </a>
    </LI>
</UL>

So, two things are happening. One, the modified anchor is simply not working and two, what should modify from “href=’#pageExercise_EXERCISENUMBER’” to “href=’#pageExercise_0′” (or whatever the current row index (‘rowIdx’) is modifies it to: “href=’http://www.mydomain.com/themainpage.php#pageExercise_0′“.

I need a way to tell javascript to stop “helping” me on the href. As for issue #1, I think it’s related to #2.

Thanks in advance,

Scott.

Answer 1

this.href

Will return the fully-qualified URL that the anchor points to.

You can use jQuery’s attr function to return what you want:

var $this = $(this);
$this.attr("href", $this.attr("href").replace('EXERCISENUMBER', rowIdx));

Here‘s a good post explaining how .attr("href") is “normalized”