wailing_stone
wailing_stone

Reputation: 173

Jquery each inside of function failing

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

Answers (3)

Brock Adams
Brock Adams

Reputation: 93453

Key issues:

  1. .alert() is not a property and can't be chained like that.
  2. In the Fiddle; that userscript jQuery code is no good (it breaks in Firefox, among several other sins). Omit such code from the Fiddle as it is not relevant to the question asked and breaks the fiddle for most (maybe all) users.
  3. Once wrapped in the function (NewPosts), the code will not fire unless called from within myFunction() (Or a later, injected <script> node).

Lesser issues:

  1. If the post count is just text (as seems likely from the sample HTML, do not use .contents() or .html(). Just use .text()
  2. Likewise, onless the content contains HTML nodes, especially with event listeners, there is no need/point for .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

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

aziz punjani
aziz punjani

Reputation: 25776

Use .html and not .contents to inject the data.

Change

find('.count').contents(postCount); 

to

find('.count').html(postCount)

Upvotes: 1

Related Questions