jquery-mobile:获取 ui-li-count 的值

Question

我有十几个可折叠列表(如下所示)，每个列表都有一堆动态创建的“li”:

  <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>

当用户点击其中一个“li”时，我想删除“li”(该部分正在工作)，然后我需要更新/减少 ui-li-count。为了找到跨度并获取其内容，我使用以下命令:

    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);

警报显示“计数 = 未定义”。

如何查找并检索文本内容？

Answer 1

问题是您使用 .closest() 。方式.closest()工作原理是找到最近的父/子元素，从(this)元素向外散开。在您的代码中，不存在作为 <li> 的直接父/子元素的 span 元素。 ，所以它返回未定义。

简单地说，使用 jquery 选择器，您想要获取的跨度是像这样从 li 中嵌套的:

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

但是我们并不真的想使用所有这些选择器，所以我们可以这样做:

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

因为h3与您的 ul 处于同一水平，我们首先需要获取它的容器，在您的示例中是 div 。然后我们使用 find 来查找该 div 内的跨度。

另请注意，我使用了 .text()来获取内容。这是 javascript 的 jQuery 替代方案 .textContent .

制作了一个简单的测试用例，以便您可以看到它与您的代码一起工作:

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

希望这能为您指明正确的方向:)

<小时/>

更新

您将遇到的另一个问题是您的 DOM 的布局并不完全符合您的想法。当窗口加载时，jQuery Mobile 会在页面中插入额外的元素，以便实现其功能。

您的实际页面 DOM 看起来像这样:

<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>

请注意 jQuery Mobile 为使可折叠功能发挥作用而插入的额外 和 元素。使用 closest(); 遍历 DOM 时，您需要考虑这些元素。 , find(); , parent(); , children();等