jquery jqm .closest 跨度

Question

我有一个 jquery 移动列表视图，用户将单击其中一个 li，这将激活我的删除代码。所有这些都在起作用。问题是我需要为每个删除的li减少一个li计数。

列表视图如下所示（页面上有九个列表视图）：

<div data-role="collapsible" data-collapsed="true" data-inset="true">
  <h3>Robbery
  <span id="rob_count" class="ui-li-count" style="float:right;">3</span></h3>
  <ul id="robberyAlertList" data-role="listview">
  <li id="1" class="robbery">Some text</li>
  <li id="2" class="robbery">Some more text</li>
  <li id="3" class="robbery">Still more text</li>
  </ul>
</div>

点击 li 后，我的删除函数被调用并在其中（提示删除后）我这样做：

var nCnt = $("#" +msg_id).closest( "span" ).text();
           $("#" +msg_id).closest( "span" ).text(--nCnt);
           $('#' +msg_id).remove();
           $('#fetch-result').html("Alert was deleted!");

我想做的是获取跨度 (3) 内的文本并将其减 1。发生的事情是 li 被删除，#fetch-result 被设置，但没有别的。我认为我没有达到 li 以上的跨度，而且我肯定没有达到 3。

我的猜测是我没有正确使用 .closest。

有什么建议吗？

Answer 1

从元素本身开始，closest() 查找 DOM 树，parent 通过 parent，所以它不会找到 span 你正在寻找，因为它是 parent 的 兄弟姐妹 的 child（想想堂兄）。此外，我不会尝试获取当前计数并减少它，而是简单地计算剩余的列表项并在其位置放置一个新计数：

function removeMessage(msg_id) {
    var $toRemove = $('#' + msg_id); // element to remove
    var $list = $toRemove.parent('ul'); // element's parent
    $toRemove.remove(); // remove it
    var newCount = $list.find('li').length;
    $list.closest('div').find('.ui-li-count').text(newCount); // get and show new count
}

removeMessage('1');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-role="collapsible" data-collapsed="true" data-inset="true">
  <h3>Robbery
  <span id="rob_count" class="ui-li-count" style="float:right;">3</span></h3>
  <ul id="robberyAlertList" data-role="listview">
  <li id="1" class="robbery">Some text</li>
  <li id="2" class="robbery">Some more text</li>
  <li id="3" class="robbery">Still more text</li>
  </ul>
</div>

jquery jqm .closest 跨度

jquery jqm .closest span

javascript

jquery

jquery-mobile