jQuery: find() und children() - wofür?

[DiVaO]

Guten Abend,


ich bin gerade dabei ein Paar Video-Tutorials zu jQuery anzusehen (mit dem ich mich bis jetzt nur wenig auskenne).
Dort wurden die find() und children() Methoden gezeigt. Nur ich verstehe nicht, wozu die überhaupt Nütze sind.

<script>
$('ul').children('li').css('color', 'blue'); // entspricht ul > li
$('ul').find('li').css('color', 'blue'); // entspricht ul li
</script>

Wieso benutzt man stattdessen nicht gleich:

<script>
$('ul > li').css('color', 'blue'); // anstatt children()
$('ul li').css('color', 'blue'); // anstatt find()
</script>

Das Ergebnis ist das gleiche. Gibt wes trotzdem einen Unterschied? In welchen Situationen sollte man find() und children() einsetzen?
Weder Google noch die jQuery Dokumentationen erklären das.

Wäre sehr dankbar, wenn mich da jemand aufklären könnte.
Vielen Dank.

 

[Tronjer]

Beide Funktionen dienen zum Traversieren innerhalb des DOM. Während children() nur auf direkte Kindelemente anwendbar ist, kann man mit find() beliebig viele Hierachiestufen nach unten gehen.

Prinzipiell wäre es natürlich einfacher, Elemente direkt zu adressieren und diesen im Zweifelsfall einfach eine ID oder Klasse zuzuweisen. Aber es gibt auch Fälle, in denen das nicht möglich ist, weil ein Projekt auf mehrere Entwickler aufgeteilt wird und man selber vielleicht nur für CSS und JavaScript zuständig ist.

 

[DiVaO]

Mit anderen Worten, die direkte Methode ist für jemanden wie mich sinnvoller und children() bzw. find() bieten jedenfalls für mich keine Vorteile.
Das wurde leider nicht genau erklärt, hab mich deshalb gewundert wieso man es so kompliziert gemacht hat.

Danke auf jeden Fall! ;)

 

[Tronjer]

Mit anderen Worten, die direkte Methode ist für jemanden wie mich sinnvoller und children() bzw. find() bieten jedenfalls für mich keine Vorteile.
Das wurde leider nicht genau erklärt, hab mich deshalb gewundert wieso man es so kompliziert gemacht hat.

Danke auf jeden Fall! ;)

Um zu verstehen, dass Funktionen wie find() eine erhebliche Vereinfachung darstellen, muss man es purem JavaScript gegenüberstellen, wo selbst Zeilenumbrüche als Nodes gelten und beim Traversieren berücksichtigt werden müssen. Ein Konstrukt wie dieses, um leere Nodes zu löschen, ist da schon aufwendiger als jQuery.

<div id="rahmen">
    <h1>Uberschrift</h1>
    <p>Text 1</p>
    <p>Text 2</p>
    <p>Text 3</p>
</div>

<script type = "text/javascript">

var Nodes =
{
    id : false,
    box: false,
    
    delEmpty : function(id)
    {
         this.box = document.getElementById(id);
         for (var i = 0; i < this.box.childNodes.length; i++) {
             if (null == this.box.childNodes[i].firstChild) {
                 this.box.removeChild(this.box.childNodes[i]);                
             }
         }
         alert(this.box.childNodes.length);
    }
}

Nodes.delEmpty('rahmen');
</script>

 

[Asterixus]

Es kann nützlich sein, wenn man beispielsweise etwas mit Kindelementen machen will. Nehmen wir an, ich will erst nach dem Klick auf einen Container eine Liste im Container anzeigen:

<div class="container">
  <h1>Container 1</h1>
  <ul><li>Liste 1</li></ul>
</div>
<div class="container">
  <h1>Container 2</h1>
  <ul><li>Liste 2</li></ul>
</div>
<div class="container">
  <h1>Container 3</h1>
  <ul><li>Liste 3</li></ul>
</div>
<div class="container">
  <h1>Container 4</h1>
  <ul><li>Liste 4</li></ul>
</div>
<style type="text/css">
.container ul {display:none}
</style>

jQuery(window.document).ready(function () {
    jQuery(".container").click(function () {
        jQuery(this).find("ul").css({display: "block"});
    });
});

Damit brauchst du nicht mit umständlichen IDs rumzuspielen.

Glaub mir, das ist wirklich nützlich. Hat auch nicht unbedingt was mit mehreren Personen zu tun. Man sieht auch oft noch jQuery-Code der sehr umständlich verfasst wurde, weil sich die Leute einfach nicht der Kraft von jQuerys API bewusst sind.