Question

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

listview看起来像这样（页面上有九个列表视图）：

<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正在设置但没有别的。我不认为我已经超越了李，而且我肯定没有得到3。

我的猜测是，我没有用.closest做正确的事。

有什么建议吗？

Answer 1

从元素本身开始，closest()按父项查找DOM树，因此它找不到您要查找的span，因为它是一个孩子父母的一个兄弟姐妹（想想堂兄）。此外，我只是计算剩余的列表项并将新计数放在其位置，而不是尝试获取当前计数并减少它：

＆＃13;

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

＆＃13;

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

＆＃13;

jquery jqm .closest span

1 个答案: