put your javascript files before the body tag, they block loading of content and should be thus loaded last.
They are before the <body> tag, in the <header> tag. I have tried placing the Javascript both in the <header> and at the end of the document, but stil dosent work.
var theHref = $(“#source_ahref a:first”).attr(“href”);
$(“#target_ahref a:first”).attr(“href”, theHref);
This assumes that you want the first link inside the respective div’s. Why not give the ID’s to the link tags themselves? Would make it a little simpler.
Also, no need for the document.ready() function if you’re putting your JS just before the </body> tag. The DOM will have already loaded by that point.
By the way, it looks like the errors from before are in the selection of the links… you guys were selecting the containing <div> tag, which has no “href” attribute.
I probably didn’t have to point that out, but just in case you were wondering - that’s where you went wrong.
You’ve erased the <div> tag that originally had the class “target_ahref” and applied it directly to the link… that’s good, but you have to change your selectors to reflect that, because you’d now be looking for a link inside a link… not what you want. Here’s the change:
var theHref = $(“#source_ahref a:first”).attr(“href”);
$(“#target_ahref:first”).attr(“href”, theHref);
I also didn’t realize there was more than one link to change. As such, you need to stop using id’s and change them to classes, since id’s are meant to be unique. Once you’ve changed each source_ahref & target_ahref into classes, here’s how you’d code it:
$(“.source_ahref a”).each(function(){
var theHref = $(this).attr(“href”);
$(this).parent().next().children(‘.target_ahref’).attr(“href”, theHref);
});
Here’s the full code:
<h2>Product Name</h2>
<div id="cat_description">
<div id="list">
<ul id="{tag_position this document}" class="list_item">
<li class="source_ahref"><a href="#Link1">This is the Source Link</a></li>
<li class="text">Support Document 1
<a class="target_ahref" href="#">Read Document</a>
</li>
<li class="count">Alpha</li>
<li class="timestamp">105322</li>
</ul>
<ul id="{tag_position this document}" class="list_item">
<li class="source_ahref"><a href="#Link2">This is the Source Link</a></li>
<li class="text">Support Document 4
<a class="target_ahref" href="#">Read Document</a>
</li>
<li class="count">Charlie</li>
<li class="timestamp">105324</li>
</ul>
<ul id="{tag_position this document}" class="list_item">
<li class="source_ahref"><a href="#Link3">This is the Source Link</a></li>
<li class="text">Support Document 2
<a class="target_ahref" href="#">Read Document</a>
</li>
<li class="count">Alpha</li>
<li class="timestamp">105325</li>
</ul>
<ul id="{tag_position this document}" class="list_item">
<li class="source_ahref"><a href="#Link4">This is the Source Link</a></li>
<li class="text">Support Document 3
<a class="target_ahref" href="#">Read Document</a>
</li>
<li class="count">Beta</li>
<li class="timestamp">105323</li>
</ul>
</div>
</div>
<!-- Javascript -->
//jQuerySort
jQuery.fn.sortBy = function() {
var selectors = arguments;
this.sort(function(a, b) {
// run through each selector, and return first non-zero match
for(var i = 0; i < selectors.length; i++) {
var selector = selectors[i];
var first = $(selector, a).text();
var second = $(selector, b).text();
var isNumeric = Number(first) && Number(second);
if(isNumeric) {
var diff = first - second;
if(diff != 0) {
return diff;
}
}
else if(first != second) {
return first < second ? -1 : 1;
}
}
return 0;
});
this.appendTo(this.parent());
return this;
};
//Pulling and Placing ahref
$(".source_ahref a").each(function(){
var theHref = $(this).attr("href");
$(this).parent().next().children('.target_ahref').attr("href", theHref);
});
//Sorts Documents by Position and Rating
$('#list .list_item').sortBy('.count', '.timestmap');
All though you solution make perfectly scenes, I can’t get it functioning. 