Beispiel für eine JQuery-Filterauswahl

Dieses Tutorial erklärt die Verwendung von Filterauswahl in jQuery. Der Filterauswahl ist eine nützliche Funktion, um alle Elemente aus der Menge der übereinstimmenden Elemente zu filtern, die dem Selektor oder bestimmten im Funktionstest angegebenen Kriterien entsprechen. Es werden nur die Elemente zurückgegeben, die mit dem Filterselektor übereinstimmen. Die Elemente, die den angegebenen Kriterien nicht entsprechen, werden aus der Auswahl entfernt und stellen nur übereinstimmende Elemente dar. Der bereitgestellte Selektor wird für jedes Element verwendet und diejenigen Elemente, die mit dem angegebenen Selektor übereinstimmen, werden im Ergebnis dargestellt. Der Filterselektor ist das Gegenteil von Nichtselektor.

Syntax des JQuery-Filterselektors

$(selector).filter(criteria)

Der Parameter „Kriterien“ ist ein Selektorausdruck, der Elemente angibt, die aus der Menge der übereinstimmenden Elemente ausgewählt werden sollen.

Beispiel für eine JQuery-Filterauswahl

<!doctype html>
<head>
<title>JQuery Filter Selector</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<h3>JQuery Filter Selector Example</h3>
<style>
.myclass
{
color:red;
}
</style>
<script type="text/javascript">
   $(document).ready(function(){
      $("#mybutton").click(function(){
         $("div").filter("#myval").css("border","3px solid red");
      });
      $("div").filter(function(index){
         return $("span",this).length==2;}).css("background-color","lightpink");
      $("p").filter(":even").css("background-color","orange");
      $( "span" ).filter( ":middle" ).css( "border", "3px solid green");
   });
</script>
<body style="line-height:1.2em">
   <div id="myval">This is First div.</div>
   <div id="myval1">This is Second div.</div>
   <div id="myval">This is Third div.</div>
   <button id="mybutton">Click to see filtered elements</button><br>
<fieldset>
<legend><strong>Using function index</strong></legend>
   <div>
      <span>Hello World!!!.</span>
   </div>
   <div>
      Welcome to jQuery.
   </div>
   <div>
      <span>It is <span>JavaScript</span> library.</span>
   </div>
   <div>
      <span>It is lightweight,"write less, do more",JavaScript library.   </span>
   </div>
   <div>
      <span>It is combination of <span>HTML, CSS</span> and JavaScript</span>
   </div>
</fieldset>
<fieldset>
<legend><strong>Returns all the elements that are even</strong></legend>
   <p>Hello World!!! 0</p>
   <p>Welcome to jQuery 1</p>
   <p>It is JavaScript library 2</p>
   <p>It is lightweight, "write less, do more", JavaScript library 3</p>
   <p>The purpose of jQuery is to make it much easier to use JavaScript on your website 4</p>
   <p>It is combination of HTML, CSS and JavaScript 5</p>
</fieldset>
<fieldset>
<legend><strong>Selecting middle elements</strong></legend>
   <span>My First Span</span>&nbsp;
   <span >My Second Span</span>&nbsp;
   <span >My Third Span</span>&nbsp;
   <span>My Fourth Span</span>&nbsp;
</fieldset>
</body>
</html>
  • Wie im obigen Programm gezeigt, haben wir den Code in $(document).ready verwendet, bei dem es sich um ein Ereignis handelt, das ausgelöst wird, wenn das Dokument bereit ist. Es wird ausgeführt, sobald das Seitendokumentobjektmodell für die Ausführung von JavaScript-Code bereit ist.
  • Die Zeile $(“#mybutton”).click(function()) definiert die Klickmethode, die ausgeführt wird, wenn auf ein Element geklickt wird.
  • $(“div”).filter(“#myval”).css(“border“,3px solid red“); Zeile definiert einen Filterselektor, der alle Elemente aus der Menge der übereinstimmenden Elemente herausfiltert, die nicht mit dem angegebenen Selektor übereinstimmen. Hier stimmt es mit den Elementen überein, die idmyval angegeben haben, und wenn wir auf die Schaltfläche klicken, stellt es gefilterte Elemente mit rotem Farbrand dar.
  • Die Zeile $(“div”).filter(function(index)) ermöglicht das Filtern nach einer Funktion statt nach einem Selektor. Wenn die Funktion „true“ zurückgibt, wird das Element in den Filtersatz aufgenommen oder andernfalls ausgeschlossen.
  • Die nächste Zeile enthält zwei span-Elemente, die auf jedes Element im Dokument verweisen. Es werden die Elemente in hellrosa Farbe angezeigt, die genau zwei Span-Elemente enthalten.
  • $(“p”).filter(“:even”).css(“background-color”,orange“); Zeile filtert die Elemente, die vom Typ gerade sind. Die resultierenden Elemente werden mit orangefarbenem Hintergrund angezeigt.
  • $( „span“ ).filter( „:middle“ ).css( „border“, „3px solid green“); Zeile definiert Span-Elemente, die einen grünen Farbrand enthalten. Es fügt den Rand zu mittleren Elementen hinzu.

Demo zum JQuery-Filterselektor

Wenn Sie das obige Beispiel ausführen, erhalten Sie die folgende Ausgabe:

  • Führen Sie die JQuery Filter Selector-Demo aus

Beispiel für eine JQuery-Filterauswahl

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Nach oben scrollen