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

kuhlmaehn

kuhlmaehn

Erfahrenes Mitglied
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?
Code: 
$("#elementid").find("*").index(event.target) > -1
event.target ist hier ein Element was irgendwo unter einem div mit der ID "elementid" liegt.
Danke!
 
Moin,

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

Kurzes Beispiel:
Code: 
<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>
 
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: 
<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>
 
Zuletzt bearbeitet:
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:
HTML: 
$("#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! :)
 
Zuletzt bearbeitet:
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:
HTML: 
$("#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.
 
Bei mir wird da auch "geht" angezeigt:
Code: 
<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>
 
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?
Code: 
$("#elementid").find("*").index(event.target) > -1
Zum Vergrößern anklicken....

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

Javascript: 
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.
});
 
Sven Mintel hat gesagt.:
Bei mir wird da auch "geht" angezeigt:
Zum Vergrößern anklicken....
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.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück