3

我有十几个可折叠列表（如下所示），每个列表都有一堆动态创建的“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);

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

如何查找和检索 textContent？

4

1 回答 1

2

问题是您使用.closest(). 有效的方法.closest()是找到最近的父/子，从 (this) 元素散开。在您的代码中，没有 span 元素是 an 的直接父/子<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()获取内容。这是 jQuery 替代 javascripts .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();在使用, find();, parent();,children();等遍历 DOM 时，您需要考虑这些元素。

于 2012-08-26T00:25:54.770 回答