[jQuery] Prüfen ob Element Kind von anderem ist @ tutorials.de: Tutorials, Forum & Hilfe

kuhlmaehn · 16.07.10 13:39

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 :

1	$("#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.07.10 14:00

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>

**Quaese** · 16.07.10 14:15

Hi,

Edit: Falsch gelesen ... sorry

Ciao
Quaese

kuhlmaehn · 16.07.10 15:14

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-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() {

  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.07.10 15:35

Das sollte eigentlich ausreichen:

Code :

1
2
3

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

kuhlmaehn · 16.07.10 15:55

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-Code:

$("#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.07.10 16:25

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-Code:

$("#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.07.10 19:25

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>

***CPoly*** · 16.07.10 20:07

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

Zitat von kuhlmaehn

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 :

1	$("#elementid").find("*").index(event.target) > -1

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

Code 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.
});

kuhlmaehn · 16.07.10 20:20

Zitat von Sven Mintel

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.07.10 20:32

Ich verstehe noch nicht zu 100% was du in deinem Beitrag (http://www.tutorials.de/forum/javasc...ml#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.07.10 23:35

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

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

JQuery Element ausgeben

jQuery Element vorhanden prüfen

DIV-Element relativ zu anderem positionieren

prüfen welches Element unter einem Element liegt?

DIV Element an anderem ausrichten!

E-Mail:

Abonnieren Abbestellen