# [jQuery] Prüfen ob Element Kind von anderem ist



## kuhlmaehn (16. Juli 2010)

Hi,
ich hab jetzt lange gesucht aber nichts gescheites gefunden.
Gibt es eine elegantere Möglichkeit zu prüfen, ob ein Element sich in der Baumstruktur *irgendwo* unter einem anderen Befindet (also nich nur ein direktes Kind ist) als diese?

```
$("#elementid").find("*").index(event.target) > -1
```
event.target ist hier ein Element was irgendwo unter einem div mit der ID "elementid" liegt.
Danke!


----------



## Sven Mintel (16. Juli 2010)

Moin,

parents() wäre ein gutes Mittel dafür 

Kurzes Beispiel:

```
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
	<div id="e1"><i><span>klick1</span></i></div>
	<div id="e2"><i><span>klick2</span></i></div>
	<div id="e3"><i><span>klick3</span></i></div>
	<div id="e4"><b><span>klick4</span></b></div>
	<div id="e5"><i><span>klick5</span></i></div>
<script>
$("span").click(function()
                {
                 alert(($(this).parents('#e4').length)?'Treffer':'daneben');
                }
                );

</script>
</body>
</html>
```


----------



## Quaese (16. Juli 2010)

Hi,

Edit: Falsch gelesen ... sorry

Ciao
Quaese


----------



## kuhlmaehn (16. Juli 2010)

Mh, ich glaub mit parents krieg ich es nicht hin. Mein Beispiel war etwas schlecht, ich hab mal ein besseres gebastelt.
Alle Elemente (beliebig) in den oberen bzw. innersten <li> sollen ein alert auslösen. Die <li> in der höheren Ebene allerdings nicht. Das Problem ist, dass ich erst in einer noch höheren Ebene einen div mit einer Klasse habe. Der HTML-Code kann nicht verändert werden. Nur der jQuery-Code.
So wie es gerade läuft soll es auch laufen nur wenn möglich nicht mit find("*").
Hoffentlich kann man da jetzt noch durchblicken und ich hab nichts verrafft. 
[Edit]
Ich hab es übrigens so probiert: $(event.target).parents(ele).size();
aber da war die Länge bei den äußeren <li> auch bei 4, keine Ahnung warum...

```
<html>
<head>
  <style>

  </style>
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>


<div id="huhu" style="height:300px; width: 300px; background-color:#ff0000; color:#ffffff;">
  <ul>
    <li>
      <div style="background-color:#00ffff;">
        <ul>
          <li><img src="" style="width:100%; height:10px;"></li>
          <li><div style="width:100%; height:10px; background-color:#00ff00;"></div></li>
          <li>asd</li>
          <li><span style="width:100%; height:10px; background-color:#0000ff; display:block;"></span></li>
        </ul>
      </div>
    </li>
    <li>
      tuut
    </li>
    <li>
      tuut2
    </li>
  </ul>
</div>


<script>

$(document).ready(function() {

  var ele = $("#huhu > ul > li > div");

  $("#huhu").mouseleave(function(event) {
  
    document.title = event.target;
    
    if(ele.find("*").index(event.target) > -1) {
      alert("geht");  
    }  
  });
});


</script>
</body>
</html>
```


----------



## Sven Mintel (16. Juli 2010)

Das sollte eigentlich ausreichen:
	
	
	



```
$(document).ready(function() {
  $("#huhu > ul > li > div li").click(function(){alert('geht');});
});
```


----------



## kuhlmaehn (16. Juli 2010)

Mh sorry, also es gibt bereits eine mouseleave-Funktion auf einem äußeren div (in meinem Bespiel "huhu") und diese soll nur angepasst werden. Ich kann also nicht einfach eine weitere Funktion auf die li-Elemente legen. Das hatte ich sogar probiert es hat allerdings nur die ursprüngliche Funktion gegriffen.
[Edit]
Mh ok, jetzt hat es so doch funktioniert:

```
$("#huhu").mouseleave(function(event) {  
  document.title = $(event.target).parents(ele).size();
});
$("#huhu > ul > li > div > ul li").mouseleave(function(event) {
    alert("geht");  
});
```
Muss ich wohl nochmal im Original probieren warum es vorhin nicht geklappt hat. Dank dir!


----------



## kuhlmaehn (16. Juli 2010)

Ich mach mal einen neuen Post wegen der Übersichtlichkeit:
Das Problem war hierbei, dass beide Funktionen auf etwas gleiches zugreifen. Es setzt sich dabei aber nur die allgemeinere Funktion durch:

```
$("#huhu").mouseleave(function(event) {  
  document.title = $(event.target).parents(ele).size();
});
$("#huhu > ul > li > div").mouseleave(function(event) {
  document.title = "geht";
});
```
"geht" wird also nie angezeigt, soll aber eigentlich den oberen Wert überschreiben.


----------



## Sven Mintel (16. Juli 2010)

Bei mir wird da auch "geht" angezeigt:
	
	
	



```
<html>
<head>
  <style>

  </style>
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>


<div id="huhu" style="height:300px; width: 300px; background-color:#ff0000; color:#ffffff;">
  <ul>
    <li>
      <div style="background-color:#00ffff;">
        <ul>
          <li><img src="" style="width:100%; height:10px;"></li>
          <li><div style="width:100%; height:10px; background-color:#00ff00;"></div></li>
          <li>asd</li>
          <li><span style="width:100%; height:10px; background-color:#0000ff; display:block;"></span></li>
        </ul>
      </div>
    </li>
    <li>
      tuut
    </li>
    <li>
      tuut2
    </li>
  </ul>
</div>


<script>

$(document).ready(function() {
  $("#huhu").mouseleave(function(event) {  
  document.title = 'nix';
});
$("#huhu > ul > li > div > ul li").mouseleave(function(event) {
    document.title = 'geht';
});
});


</script>
</body>
</html>
```


----------



## CPoly (16. Juli 2010)

Da ich gerade nicht ganz durchblicke, ob ihr jetzt weiter kamt und wo es gerade harkt, beziehe ich mich auf den Startpost.



kuhlmaehn hat gesagt.:


> Hi,
> Gibt es eine elegantere Möglichkeit zu prüfen, ob ein Element sich in der Baumstruktur *irgendwo* unter einem anderen Befindet (also nich nur ein direktes Kind ist) als diese?
> 
> ```
> ...



Dein Code in "elegant" (Der Selektor "#foo #bar" findet das Element mit der id "bar" *irgendwo* unterhalb des Elements mit der ID "foo")


```
if ($("#elementid #"+event.target.id).size > 0)

//bzw. so

$("#huhu").mouseleave(function(event) {  
    if($("#"+this.id+" #"+event.target.id).size() > 0)//this.id is "huhu". So ist es aber einfacher weiter zu verwenden.
        alert("ja");//kommt immer dann, wenn die Maus auf einem Element unterhalb von huhu war, aber nicht huhu selbst.
});
```


----------



## kuhlmaehn (16. Juli 2010)

Sven Mintel hat gesagt.:


> Bei mir wird da auch "geht" angezeigt:


Aber nur manchmal und ungleichmäßig und vorallem nicht wenn man die Maus rechts aus dem Hauptdiv rauszieht oder? Und mit "#huhu > ul > li > div" auch gar nicht mehr. Irgendwie muss man die Funktion doch generell überschreiben können.
@CPoly
Der Ansatz sieht sehr interessant aus. Ich hab es allerdings gerade mal ausprobiert und auch von den unteren li-Elementen ein "geht" bekommen.


----------



## CPoly (16. Juli 2010)

Ich verstehe noch nicht zu 100% was du in deinem Beitrag (http://www.tutorials.de/forum/javas...element-kind-von-anderem-ist.html#post1883006) willst.
Vielleicht kannst du mal markieren, welche Elemente jetzt akzeptiert werden sollen und welche nicht. Mir ist heut einfach zu warm, vielleicht liegts daran :-D


----------



## kuhlmaehn (16. Juli 2010)

Ich halts auch kaum aus ^^
Es soll halt nur bei allem was in den li-Elementen steht welche unterhalb des divs sind die Meldung kommen.
Die mouseleave-Funktion besteht bereits und es soll eine Erweiterung geben, die sich auf die besagten li-Elemente bezieht. Die Erweiterung ändert dabei allerdings die selbe Eigenschaft.
Ich hoffe das macht jetzt irgendwie Sinn. So wie es in dem Beispiel oben läuft soll es halt auch sein nur vielleicht etwas eleganter


----------

