Reputation: 173
I'm trying to write a function that will loop through a series of divs, single out the divs that contain a small
element, clone the contents of the small
element, search through another block on the page to find the li
element whose index matches that of the current div in the loop, then insert the contents cloned from the small element
into the span
element within that div.
I've got it working up until the part where it's supposed to insert the cloned content into the li
. Nothing happens. Also, the entire thing fails when I attempt to put it in a function as shown in the code that I've commented out. Any help would be appreciated.
//function NewPosts(){
jQuery('div.tracked_tags > div').each(function (i) {
var thisIndex = jQuery(this).index();
if (jQuery(this).find('small').length){
var postCount = jQuery(this).find('small').contents().clone();
//alert('Hey'+postCount.html()+''+thisIndex+'');
jQuery('div#right_column ul#tracked_tags li:eq('+thisIndex+')').find('.count').contents(postCount).alert(postCount);
//setTimeout(arguments.callee, 30000);
}
});
//};
Here's the fiddle. The alerts aren't important, I just stuck them in for troubleshooting.
Per suggestion, this is basically the code I'm starting with:
<div class="tracked_tags">
<div>
<small id="blah" class="count">10 new posts</small>
</a>
</div>
<div>
<small id="blah2" class="count">5 new posts</small>
</a>
</div>
</div>
<ul id="tracked_tags">
<li><a href=""><span class="count"></span></a></li>
<li><a href=""><span class="count"></span></a></li>
</ul>
And this is what I want to end up with:
<ul id="tracked_tags">
<li><a href=""><span class="count">10 new posts</span></a></li>
<li><a href=""><span class="count">5 new posts</span></a></li>
</ul>
EDIT: I'm not sure why, but the portion of the code that copy/pastes the content from one element to the other suddenly started working. I've tweaked a few things so I'm not sure what ended up doing it, but huzzah!
However, the whole thing still fails is I uncomment the function wrapping it. I need it to be in a function so that it can re-run every 30 seconds.
Upvotes: 0
Views: 213
Reputation: 93453
Key issues:
.alert()
is not a property and can't be chained like that.NewPosts
), the code will not fire unless called from within myFunction()
(Or a later, injected <script>
node).Lesser issues:
.contents()
or .html()
. Just use .text()
.clone()
.Anyway, fixing issues 1, 2, and 3 makes the code seem to work. See this fiddle.
function NewPosts () {
jQuery('div.tracked_tags > div').each(function (i) {
var thisIndex = jQuery(this).index();
if (jQuery(this).find('small').length){
var postCount = jQuery(this).find('small').contents().clone();
//alert('Hey'+postCount.html()+''+thisIndex+'');
jQuery('div#right_column ul#tracked_tags li:eq('+thisIndex+')').find('.count').contents(postCount);
//setTimeout(arguments.callee, 30000);
}
});
};
NewPosts ();
Upvotes: 0
Reputation: 50563
As for the commented code:
//function NewPosts(){
//};
^---REMOVE THIS
More things:
It seems the .contents() only works as getter, not setter as you imply with .contents(postCount)
see the api reference.
Upvotes: 0
Reputation: 25776
Use .html and not .contents to inject the data.
Change
find('.count').contents(postCount);
to
find('.count').html(postCount)
Upvotes: 1