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'上执行taphold时，我想删除它'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);

警报显示“Count = undefined”。

如何查找和检索textContent？

Answer 1

问题在于您使用.closest()。 .closest()的工作方式是找到最近的父/子，远离（this）元素。在您的代码中，没有span元素是<li>的直接父/子，因此它返回undefined。

简单地说使用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()来获取内容。这是javascripts .textContent的jQuery替代。

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

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();，find();，parent();，children();等遍历DOM时，您需要考虑这些元素。

jquery-mobile：获取ul-li-count的值

1 个答案: