jquery jqm .closest span

jquery jqm .closest span

本文关键字：span closest jqm jquery      更新时间：2023-09-26

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

列表视图看起来像这样(页面上有9个列表视图):

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

我要做的是在span(3)内获取文本并将其减少1。所发生的是li被删除了，#fetch-result被设置了，其他什么都没有。我不认为我能得到li上面的空间当然也不能得到3

我的猜测是，我没有做正确的事情与。最接近。

有什么建议吗?

从元素本身开始，closest()查找DOM树，父逐个父，所以它不会找到您正在寻找的span，因为它是父兄弟的子(想想表兄)。另外，我不会尝试获取当前计数并减少它，而是简单地计数剩余的列表项并在其位置上添加一个新计数:

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>

相关文章：