javascript - 附加除指定变量之外的整个数组

Question

感谢您检查我的问题。

我试图在页面上将以下数组显示为无序列表:

var answers = ["cat", "dog", "horse", "hamster", "duck"]

但是，如果这个数组中有这个变量:

var x = $('#my-input').val()

我希望将其从显示的数组中删除。也就是说，如果用户在输入中键入“duck”，我不希望“duck”出现在页面上显示的数组项中。我希望我说得清楚。

这是我用来将数组显示到页面上的js代码:

$("#button").click(function(e){

    var answers = ["cat", "dog", "horse", "hamster", "duck"]
    var x = $('#my-input').val()

    if(jQuery.inArray(x, answers) !== -1) {
        $('#my-div').append(answers);
    }

});

正如你所看到的，我正在努力解决两件事:

1) 将数组附加为无序列表的元素(我正在寻找比手动输入更好的解决方案:$('#my-div').append("<ul> + <li> + answers[0] + </li> + </ul>") 对于所有项目。

2) 从数组中删除一项，即输入的值。

再次感谢!

Answer 1

过滤现有数组:

const val = $('#my-input').val()
const newArray = answers.filter(a => a != val) 

至于附加，你的方法没问题。您可以按照此处所述使用 documentFragment https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment#Example

var list = document.querySelector('#list')
var fruits = ['Apple', 'Orange', 'Banana', 'Melon']

var fragment = new DocumentFragment()

fruits.forEach(function (fruit) {
  var li = document.createElement('li')
  li.innerHTML = fruit
  fragment.appendChild(li)
})

list.appendChild(fragment)

它有一些优点，例如你的 dom 会立即更新，因此回流只会发生 1 次。

但这与您对附加所做的操作相同(请参阅 this answer )