Question

I have a dozen collapsible list (like the following) and each gets a bunch of dynamically created ‘li’s:

  <div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="b">
    <h3>Community Alerts
    <span id="comm_count" class="ui-li-count" style="float:right;">0</span></h3>
    <ul id="communityAlertList" data-role="listview"></ul>
  </div>

When a user does a taphold on one of the ‘li’s I want to delete it the ‘li’ (that parts working) and then I need to update/reduce the ui-li-count. To find the span and get its content I’m using the following:

    var ui_li_count = $(this).closest('span')
    var count = $(ui_li_count).textContent;    // also tried innerHTML
    alert("Count = " +count);
    count--;
    $(ui_li_count).html(count);

The alert shows “Count = undefined”.

How do I find and retrieve the textContent?

Answer 1

The problem is your use of .closest(). The way .closest() works is to find the closest parent/child, fanning out away from the (this) element. In your code there is no span element that is a direct parent/child of an <li>, so it returns undefined.

To put it simply using jquery selectors, the span you want to get is nested like so from your li:

var count =  $(this).parent().parent().children('h3').children('span').text();

However we don’t really want to use all those selectors, so we could just do this:

var count =  $(this).closest('div').find('span.ui-li-count').text();

Because the h3 is on the same level as your ul, we first need to get it’s container which in your example is a div. Then we use find, to find the span within that div.

Also note that i used .text() to get the content. This is the jQuery alternative to javascripts .textContent.

Made a simple test case so you can see it working with your code:

http://jsbin.com/odamac/3/edit

Hopefully this will point you in the right direction 🙂

---

UPDATE

One more problem your going to run into is that your DOM is not exactly laid out how you think it is. jQuery Mobile inserts extra elements into the page when the window loads so that it can implement it’s functionality.

Your actual page DOM looks something like this:

<div data-role="page">

    <div data-role="collapsible" class="ui-collapsible">

        <h3 class="ui-collapsible-heading">
            <a href="#" class="ui-collapsible-heading-toggle ui-btn">
                <span class="ui-btn-inner">
                    <span class="ui-btn-text">
                        Community Alerts
                        <span id="comm_count" class="ui-li-count" style="float:right;">5</span>
                        <span class="ui-collapsible-heading-status"> click to expand contents</span>
                    </span>

                    <span class="ui-icon">&nbsp;</span>
                 </span>
             </a>
         </h3>

         <div class="ui-collapsible-content">

             <ul id="communityAlertList" data-role="listview" class="ui-listview">
                 <li data-theme="b" id="1" class="ui-li">1</li>
                 <li data-theme="b" id="2" class="ui-li">2</li>
                 <li data-theme="b" id="3" class="ui-li">3</li>
                 <li data-theme="b" id="4" class="ui-li">4</li>
                 <li data-theme="b" id="5" class="ui-li">5</li>
             </ul>

         </div>
     </div>

 </div>

Notice the extra and elements that jQuery Mobile has inserted to make the collapisible functionality work. You will need to account for these elements when traversing the DOM using closest();, find();, parent();, children();, etc.