Question

I am using the DataZombies fork of jqtouch to create an indexed list. I include the extension script and css and use markup along the lines of:

<div class="s-scrollwrapper indexed">    
    <ul id="county-list" class="edgetoedge">
        <li id="A" class="sep" >A</li>
        <li>test A</li>
        <li id="B" class="sep" >B</li>
        <li>test B</li>
        <li id="C" class="sep" >C</li>
        <li>test C</li>
        <li id="D" class="sep" >D</li>
        <li>test D</li>
    </ul>
</div>

This works fine. But when I use jquery to re-write the contents of the list the skip to index functionality doesn’t work. I’ve tried calling the following function after the DOM alterations…

initListIndices()

…but it’s not working. The indices down the right hand side still appear and the styling on the separator li’s is all good but it’s not doing it’s thing. Any suggestions?

Answer 1

The way I solved this was to create a function that clears the list indicies data. Calling this and then re-adding the indexed class to the list wrapper before calling initListIndices() seemed to fix it.

function clearListIndices() {
    // for each element with the class of .indexed
    $('body').find('.indexed').each(function(){
        // reset the listIndex data associated with this element
        $(this).data('listIndex', null);
        // removed the class to avoid multiple instances of the class    
        $(this).removeClass('indexed');     
    });

    // for each listIndex ul
    $('body').find('.listIndex').each(function(){
        // remove this from the DOM
        $(this).remove(); 
    });
}