Wie entwickle ich ein Jquery-Plugin, um das erste Kind zu finden, das mit einem Selektor übereinstimmt?

Question

Ich versuche, eine jQuery-Plugin (findFirst()), um das erste Kind mit einer bestimmten Eigenschaft (etwas in der Mitte der find() und children() Funktionen zu finden zum Beispiel angesichts diesen Auszeichnungs.

<div id="start"> 
    <div> 
     <span>Hello world</span> 
     <ul class="valid-result"> ... </ul> 
     <ul class="valid-result"> 
      <li> 
       <ul class="not-a-result"> ... </ul> 
      </li> 
     </ul> 
     <div> 
      <ul class="valid-result"> ... </ul> 
     </div> 
    </div> 
</div> 

Wenn Sie fragen nach $("#start").findFirst('ul') sollte es alle ul Listen zurück, die ich mit der gültig-Ergebnis Klasse markiert habe, aber nicht die ul mit Klasse not-a-Ergebnis. es ist diese Funktion zu finden, hat die erste Elemente, die übereinstimmen Es mit einem gegebenen Selektor, aber nicht mit den inneren Elementen, die mit diesem Selektor übereinstimmen.

Dies ist das erste Mal, dass ich versuche, eine Jquery-Funktion zu programmieren, und was ich bereits gelesen habe, hilft mir nicht allzu sehr dabei. Die Funktion, die ich entwickelt habe, ist dies:

jQuery.fn.findFirst = function (sel) { 
    return this.map(function() { 
     return $(this).children().map(function() { 
      if ($(this).is(sel)) { 
       return $(this); 
      } else { 
       return $(this).findFirst(sel); 
      } 
     }); 
    }); 
} 

Es funktioniert im Sinne versucht es das erwartete Ergebnis zurück, aber das Format es gibt das Ergebnis für mich sehr selten ist. Ich nehme an, das Problem ist etwas, was ich nicht über Jquery verstehe. Hier haben Sie the JFiddle wo ich testen.

EDIT

Das erwartete Ergebnis nach $("#start").findFirst('ul') ist ein Satz mit allen UL, der die Klasse ‚valid-Ergebnis‘ haben, aber es ist nicht möglich, diese Klasse zu verwenden, da es in einem realen existiert nicht Fall (es ist nur um zu versuchen, das Ergebnis zu erklären).

Dies ist nicht äquivalent zu first(), da zuerst nur ein Element zurückgegeben wird!

Answer 1

Sie könnten etwas tun auswählen möchten:

var selector='ul'; 

var $results= $('#start '+selector).not(selector +' '+selector); 

Die not() Methode Elemente ausschließen, die Wähler entsprechen, sondern auch Abkömmlinge des gleichen Wähler

Answer 2

Sie müssen kein Plugin erstellen. jQuery .first() Inbuilt verwenden und wie von Mark vorgeschlagen, können Sie auch erste Auswahl :first

$("#yourselector ul").first(); 

Hier verwenden ist die Verbräuche in Ihrem Fall

$("#start").find("ul").first().css("background", "red"); 
    //For Short $("#start ul").first() 

Klasse Filter zu verwenden, verwenden Sie die Attributselektor

$("#start").find("ul[class=valid-result]").first().css("background", "red"); 
    //For Short $("#start ul[class=valid-result]").first() 

Demo

---

aktualisieren

Wenn Sie nur die äußeren ul der mit Klasse hervorheben möchten valid-result dann first() nicht bei allen

benötigt

$("#start ul[class=valid-result]").css("background", "red"); 

Aber, da die innere ul auch den Hintergrund teilen auf meinem Beispiel, Sie müssen möglicherweise einen anderen Hintergrund für innere ul 's festlegen.Hier ist ein example

---

Update 2

Wenn Sie die erste Ebene des <ul> dann

$("#start div").chilrent("ul"); //this will return the first level of ul inside the div 

Answer 3

var result = $('#selector:first'); 

Answer 4

Selektoren, die alle das Ergebnis für Ihr Beispiel:

$ ('# start> *> ul) $ ('# start'). Children(). Find ('> ul') $ ('# start'). Kinder ('div'). Find ('span'). Geschwister ('ul')

$('#start').children().find('span').siblings('ul') 
$('#start').find('span').siblings('ul') 

edit: ein weiteres Beispiel:

$('#start>div>span').siblings('ul') 
$('#start').find('div').find('span').siblings('ul') 
$('#start>div>span').siblings('ul') 

WOOPS, SCRATCH ALLE, vermisste ich das letzte innere UL im div ...

SO: diese (Getestet habe ich es aus) nicht jene Kind ul des div bekommen, aber nicht innerhalb des li

$('#start div').find('>ul') 
$('#start div>ul') 

Was dies sagt, ist eine UL finden, die eine direkte Nachfahre eines DIV ist