Suchen und Entfernen eines DOM-Elements innerhalb einer Closure auf einer jQuery-Instanz

Question

Kurz gesagt, ich habe ein jQuery-Plugin, das ein Array von Closures enthält. Jedes dieser Closures enthält ein Array, das Verweise auf DOM-Elemente enthält, die das Plugin derzeit enthält verantwortlich für. Im Moment versuche ich, einen Weg zu finden, Referenzen auf ein bestimmtes Element oder eine Gruppe von Elementen aus diesen Schließungen zu finden und zu löschen. Sie aus dem Array zu entfernen, ist nicht so schwierig, da jQuery und JavaScript beides bieten, um dies zu erreichen. Ich habe jedoch Schwierigkeiten, die Elemente in den Arrays selbst zu finden. Hier ist, was ich habe:

function _generate_closures (default_color, inst) { 
    var color = default_color; 
    return { 
    update : function (style) { 
     color = style || default_color; 
    }, 
    apply : function (style) { 
     style = style || color; 
     for (var i = 0; i < group.length; i++) 
     group[i].css('color', style); 
    }, 
    add : function ($elem) { 
     group.push($elem); 
    }, 
    remove : function ($elem) { 
     // Search for and delete elements from 'group' array 
    }, 
    unbind_events : function (selector) { 
     // unbind using namespaced events 
    } 
    }; 
} 

Ich verstehe ich eine zurück Funktion können Sie die Suche tun, aber es ist die eigentliche Suche kann ich einfach nicht zu knacken sein scheinen. Vielleicht komme ich auch aus dem völlig falschen Blickwinkel heraus, was meiner Meinung nach eher der Fall ist.

Ich habe versucht, das aktuelle Element mit jedem Element in der Schließung zu vergleichen, mit jQuery $.inArray(element, group) immer noch nichts zu finden. Ich habe sogar verwendet group.indexOf(element) und noch nicht in der Lage, programmatisch zu entscheiden, ein Element ist das gleiche wie das von einem Benutzer angegeben.

Answer 1

JQuery bietet eine .is Funktion (https://api.jquery.com/is/), um zu testen, ob ein Element das gleiche ist.

function _generate_closures (default_color, inst) { 
 
    var group = []; 
 
    var color = default_color; 
 
    return { 
 
    update : function (style) { 
 
     color = (style) ? style : default_color; 
 
    }, 
 
    apply : function (style) { 
 
     style = (style) ? style : color; 
 
     for (var i = 0; i < group.length; i++) { 
 
     group[i].css('color', style); 
 
     } 
 
    }, 
 
    add : function ($elem) { 
 
     group.push($elem); 
 
     alert('Group length is ' + group.length); 
 
    }, 
 
    remove : function ($elem) { 
 
     for (var i = 0; i < group.length; i++) { 
 
     if (group[i].is($elem)) { 
 
     \t group.splice(i,1); 
 
     } 
 
     alert('Group length is ' + group.length); 
 
     } 
 
    }, 
 
    unbind_events : function (selector) { 
 
     // unbind using namespaced events 
 
    } 
 
    }; 
 
} 
 

 
var obj = _generate_closures('orange'); 
 
var $el= $('li:nth-child(2)'); 
 
obj.add($el); 
 
obj.apply(); 
 
obj.remove($el);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li>line 1</li> 
 
    <li>line 2</li> 
 
    <li>line 3</li> 
 
    <li>line 4</li> 
 
</ul>