时间戳

首页 > 解决方案 > 追加除指定变量外的整个数组

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

问题描述

感谢您检查我的问题。

我正在尝试将以下数组显示为页面上的无序列表：

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）从数组中删除一项，即输入的值。

再次感谢！

标签： javascriptarrays

解决方案

过滤现有数组：

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 次。

但这与您使用 append 所做的相同（请参阅此答案）

推荐阅读