Question

我正在网页上使用Gridster小部件。每个小部件上都有一个按钮，在单击之后将小部件的颜色更改为红色。按下该按钮后，父元素也会添加到数组中。

我的总体目标

当用户点击元素时，我希望父元素进入数组，如果他点击相同的元素，它应该从该数组中出来。

到目前为止我尝试了什么

我可以添加点击到数组中的元素，但无法从再次单击的数组中删除元素。（如果第二次单击，也想删除红色）

只是检查元素是否存在于数组中我尝试使用此函数

 function checkIfArrayIsUnique(myArray) 
    {
        for (var i = 0; i < myArray.length; i++) 
        {
            for (var j = 0; j < myArray.length; j++) 
            {
                if (i != j) 
                {
                    if (myArray[i] == myArray[j]) 
                    {
                        return false; // means there are duplicate values
                    }
                }
            }
        }
        return true; // means there are no duplicate values.
    }

问题即使单击两次相同的元素，该函数也始终返回true

我的整体JS

var parentElement = [];

$(document).on("click", ".select-element", function() {

     $(this).closest('li').attr("style", "background-color:red");
         parentElement.push($(this).closest('li'));

     console.log("Parent Element Array Length");
         for (var i = 0; i < parentElement.length; i++) {
                 console.log(parentElement[i]);
        }

});


$(document).on("click", "#check", function() {

     alert(checkIfArrayIsUnique(parentElement));

    });

Fiddle

Answer 1

问题是，我认为myArray[i] == myArray[j]在比较jQuery对象时不会让你走得太远，我的主张是你使用对象而不是数组，并管理一种为{{1}分配唯一ID的方法父母，所以你有一个快速的方法来知道它是否已经在对象中。

li

这样可以检查对象中是否已有var parentElement = {}; var uniqueId = 0; $(document).on("click", ".select-element", function() { var closestLI = $(this).closest('li'); closestLI.attr("style", "background-color:red"); closestLI.attr('id', uniqueId); parentElement[uniqueId++] = closestLI; console.log("Parent Element Array Length"); $.each(parentElement, function(i, v){ console.log(v); }); });，如果是，则将其删除：

li

修改

也许你对第二块代码感到困惑，当它与第一块代码合并时，你不能使用if(parentElement[$('li').attr('id')] !== undefined) delete parentElement[$('li').attr('id')];而是使用$('li').attr('id')，

您仍在使用数组parentLI.attr('id')而不是对象var parentElement = [];。如果不使用对象，var parentElement = {};等关联和idx: element_with_idx等方法将无效。

最后，这一行delete必须进入closestLI.attr('id', uniqueId);，因为如果元素不在对象中，我们只会分配一个新的id。

let me know

HIH

Answer 2

你也可以使用html和你的方法，你只需要使用html元素的原生jQuery函数进行比较，这样你就可以得到一个元素与另一个元素相同（或相同）的元素：

$(myArray[i]).is($(myArray[j])); // true is both are the same element

我更新了你的小提琴：https://jsfiddle.net/45psxegx/49/

编辑您现在可以使用每个小部件按钮在阵列中添加和删除小部件。

Answer 3

我在你在数组中添加元素的方式做了一些改变。如果该元素已经存在，您可以在将该元素推入数组之前进行检查。点击这里

var xhr = new XMLHttpRequest() ; // Defifned both MF 34+ && IE 10+
xhr.open('GET', webService , true) ;
(...)
Xhr.send(false);

为了跟踪数组中的元素，我已将user=> var xhr = new XMLHttpRequest() Object doesn't support this action user=> Typeof XMLHttpRequest “undefined”添加到parentElement.includes($(this).closest('li').attr("id")) ? parentElement.splice(parentElement.indexOf($(this).closest('li').attr("id"),1)) : parentElement.push($(this).closest('li').attr("id"));代码中。并将相同的ids推入数组并执行所有相关的推送（如果不存在的话）并且如果已经存在则弹出。

此外，当您尝试切换元素的红色时，您始终可以使用li来切换元素的类。

无论如何说话，这里是更新的fiddle

在控制台中打印数组。您可以检查控制台以查看如何从阵列中添加和删除元素。

由于

Answer 4

@Scaramouche和@muesac都是对的。您正在比较对象。这是一种不同的情况。您可以添加元素的另一种方法，如

parentElement.push($(this).closest('li').html().toString());

只需将gettig html作为字符串，您的代码就可以比较它们。它会解决你的问题。

使用JS / jquery检查数组中的唯一$（this）元素

4 个答案: