有2个单词字符串时按空格拆分数组

Question

I am dynamically adding and removing checkboxes from a user created list. This works fine if the item put on the list is one word, but if it contains a space then it does not work. I understand why it wouldn't work but can't find how to do successfully splice the correct one from the array.

---

var boxCounter=0;
function addToCheckListNew(item){
    var newSet = '<fieldset data-role="controlgroup" class="cbGroup' + boxCounter + '"></fieldset>';
    $('.cbDiv').append(newSet);
    var newBox = '<input type="checkbox" name="checkbox-' + boxCounter + '" id="checkbox-' + boxCounter + '" class="custom" /> <label for="checkbox-'+ boxCounter + '">'+item+'</label>';
    $(".cbGroup" + boxCounter).append(newBox).trigger('create');
    boxCounter++;
    $("#new-list-page-iteminput").val("");
    $("#new-list-page-itemlist").listview("refresh");
    currentList.push(item);
}

//Delete the selected checkboxes
function deleteCheckedListNew(){
    var checkedBoxes = $('form input:checked').parents('fieldset');
    for (var i=0;i<checkedBoxes.length;i++){
        var str = (checkedBoxes.text().trim());
            str = str.split(" ");
        var itemIndex = $.inArray(str[i],currentList);
        if(itemIndex!==-1){
            currentList.splice(itemIndex,1);
            checkedBoxes.remove();
        }
    }
}

The items put into the checkboxes are also stored in an array currentList, it is this that I am trying to remove them from. Removing the checkedboxes is fine.

Answer 1

I don't think you need to worry about the value of the text at all.

You can simply use the display index of the items to delete from the stored index.

This is on the assumption that you won't have any sorting built in yet

I simplified this down to

//Delete the selected checkboxes
function deleteCheckedListNew() {
    var checkedRows = $('fieldset').has(':checkbox:checked');
    checkedRows.each(function(index){
        currentList.splice(index, 1)
    }).remove();

}

The next step I would suggest would be to use an array of objects for each item. Then you can assign a unique id to each which is far simpler to work with than parsing text.

Having an ID stored would then let you sort the list and still easily find the stored object using array filter() or other methods.

The array would then look more like

[
  {id:1, text:'eat lunch'},
  {id:2, text:'have a beer'}
]

The id would then also be put onto each row in the template making it easy to identify in array

DEMO