jQuery:忽略 <li> 元素内的类

Question

我有以下 html 列表:

<ul>
<li class="list-group-item ReplyPill">This is my first value<span class="badge badge-pill"><div id="close">X</div></span></li>
<li class="list-group-item ReplyPill">This is my second value<span class="badge badge-pill"><div id="close">X</div></span></li>
(...)
</ul>

我正在使用这个 jQuery 来获取所有“li”元素:

let replyOptions = [];
        $('.ReplyPill').each(function () {
            replyOptions.push($(this).text());
        });

问题是“div”中的“X”也被读取，我的输出如下所示:“这是我的第一个 valueX”

我已经尝试过“.not('#close')”来排除 div，但它没有改变任何东西。

那么有没有办法在循环中忽略 id 为“close”的“div”？

Answer 1

ID 必须是唯一的 - 您需要一个类

此外，DIV 不是跨度的有效子元素

无论如何

let replyOptions = $('.ReplyPill').map(function() {
  return $(this).contents().get(0).nodeValue; 
}).get();

console.log(replyOptions);


// PS how to delegate the click on the X

$("#list").on("click",".close",function() {
  $(this).closest("li").hide(); 
})

li {
  width: 200px;
  background-color: yellow;
}

.badge {
  display: inline-block;
  float: right;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="list">
  <li class="list-group-item ReplyPill">This is my first value<span class="badge badge-pill close">X</span></li>
  <li class="list-group-item ReplyPill">This is my second value<span class="badge badge-pill close">X</span></li>
</ul>