Question

I’m trying to add a bullet to an li with the selected class if there is no span. As of now this is adding a bullet everytime the link is clicked. What is the best way to have this add and remove a bullet instead of keep adding bullets every time there is a click?

HTML

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

JS

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

Answer 1

Add a check condition

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

Full Code

$('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();
    }
});​

Check Fiddle