Jquery 仅当没有跨距图元时才在跨距图元中添加项目符号

如果没有跨度，我将尝试向具有所选类的li添加一个项目符号。到目前为止，每次单击链接时都会添加一个项目符号。使用此添加和删除项目符号而不是每次单击时都继续添加项目符号的最佳方法是什么

HTML

<ul class="files-list">
    <li class="selected">
        <span>•</span>
        "12-0001.hello-world.html"
    </li>
    <li>12-0002.hello-world.html</li>
</ul>

•
“12-0001.hello world.html”

12-0002.hello-world.html

JS

$(this).prepend($('<span />').html('&bull;')).addClass('selected').siblings().removeClass('selected').find('span').remove();

$（this）.prepend（$（''）.html（'&bull；'））.addClass（'selected'）.sides（）.removeClass（'selected'）.find（'span'）.remove（）；

添加检查条件

var $this = $(this);
if( !$this.find('span').length){
   // Your code here
}

完整代码

$('li').on('click', function() {
    var $this = $(this);
    if (!$this.find('span').length) {
        $this.prepend($('<span/>').html('&bull;'))
            .addClass('selected')
            .siblings()
            .removeClass('selected')
            .find('span').remove();
    }
});​

$（'li'）。在（'click'，function（）上{
var$this=$（this）；
if（！$this.find（'span'）.length）{
$this.prepend（$（''）.html（'&bull；'））
.addClass（'已选择'）
.兄弟姐妹（）
.removeClass（'选定'）
.find（'span'）.remove（）；
}
});​

---

为什么不试试纯CSS解决方案呢

.files-list {
  list-style: none;
}

.selected {
  list-style: disc;
}

然后您只需要切换

。所选的

类

$('.files-list > li').click(function () {
  $(this).toggleClass('selected');
})

---

为什么用一个项目符号而不是css来添加跨度<代码>li.选中：在之前？如果单击是驱动更改的操作，则没有理由将其更改为其他内容。“这就是你要问的吗？”安德烈问得好。我应该使用css，也许这会阻止重复的项目符号。@JMack我正在尝试显示多个项目符号。现在，如果你点击所选链接，每次点击该链接都会添加一个新的Bullet I agree@Andre。将项目符号添加到具有类“.selected”的li中。更干净的代码。