suchen

Heim >Web-Frontend >js-Tutorial >Der Unterschied zwischen parent() und parent() beim JQuery-Traversal und die ausführliche Erklärung der parentUntil()-Methode

Der Unterschied zwischen parent() und parent() beim JQuery-Traversal und die ausführliche Erklärung der parentUntil()-Methode

巴扎黑
巴扎黑Original
2017-06-24 09:26:121156Durchsuche

In diesem Artikel wird hauptsächlich der Unterschied zwischen parent() und parent() beim JQuery-Traversal und der parentUntil()-Methode vorgestellt. Freunde in Not können hier als Referenz kommen. Ich hoffe, es wird allen hilfreich sein passender Elementsatz

, gefiltert nach Selektor (optional). .parents(selector) Ruft die Vorfahrenelemente

jedes Elements im aktuellen Satz übereinstimmender Elemente ab, gefiltert durch den Selektor (optional). ). Bei einem jQuery-Objekt, das eine Sammlung von DOM-Elementen darstellt, können wir mit der Methode .parents() den DOM-Baum nach Vorfahrenelementen dieser Elemente durchsuchen und ihn mit passenden Elementen in der Reihenfolge vom nächsten übergeordneten Element aufwärts erstellen Ein neues jQuery-Objekt. Elemente werden in der Reihenfolge vom nächsten übergeordneten Element nach außen zurückgegeben. Die Methoden .parents() und .parent() sind ähnlich, außer dass letztere eine einzelne Ebene nach oben im DOM-Baum durchläuft. Beide Methoden können einen optionalen Selektorausdruck desselben Typs akzeptieren wie das Argument, das wir an die Funktion $() übergeben haben. Wenn dieser Selektor angewendet wird, werden Elemente gefiltert, indem getestet wird, ob sie mit dem Selektor übereinstimmen.

Das Folgende ist ein Beispiel

Der Code lautet wie folgt:



Wenn wir mit Projekt A beginnen, können wir Finden Sie seine Vorfahrenelemente

Der Code lautet wie folgt:
<ul class="level-1">
 <li class="item-i">I</li>
 <li class="item-ii">II
  <ul class="level-2">
   <li class="item-a">A</li>
   <li class="item-b">B
    <ul class="level-3">
     <li class="item-1">1</li>
     <li class="item-2">2</li>
     <li class="item-3">3</li>
    </ul>
   </li>
   <li class="item-c">C</li>
  </ul>
 </li>
 <li class="item-iii">III</li>
</ul>



Das Ergebnis dieses Aufrufs ist die Liste der Ebene 2, Element II und Liste der Ebene 1 und andere Elemente (entlang des DOM-Baums) bis zu 100db36a723c770d327fc0aef2ce13b1), um einen roten Hintergrund festzulegen. Da wir keinen Selektorausdruck angewendet haben, wird das übergeordnete Element natürlich Teil des Objekts. Wenn ein Selektor angewendet wird, wird vor dem Einbinden des Elements überprüft, ob es mit dem Selektor übereinstimmt. Da wir keinen Selektorausdruck angewendet haben, sind alle Vorgängerelemente Teil des zurückgegebenen jQuery-Objekts. Wenn ein Selektor angewendet wird, werden nur darin übereinstimmende Elemente einbezogen.

Wenn wir mit Element A beginnen, können wir sein übergeordnetes Element finden: 

$(&#39;li.item-a&#39;).parents().css(&#39;background-color&#39;, &#39;red&#39;);

Der Code lautet wie folgt:


Das Ergebnis von Dieser Aufruf lautet: Legen Sie einen roten Hintergrund für die Liste der Ebene 2 fest. Da wir keinen Selektorausdruck angewendet haben, wird das übergeordnete Element natürlich Teil des Objekts. Wenn ein Selektor angewendet wird, wird vor dem Einbinden des Elements überprüft, ob es mit dem Selektor übereinstimmt.

Sehen Sie sich unten ein Beispiel an
$(&#39;li.item-a&#39;).parent().css(&#39;background-color&#39;, &#39;red&#39;);


Der Code lautet wie folgt:


Denken:

Der Code lautet wie folgt:
<body>body
    <p id="one">one
        <p id="two">hello</p>
        <p id="three">three
            <p>p
               <a href="#">tonsh</a>
           </p>
        </p>
     </p>
</body>



Beispiel 3

Der Code lautet wie folgt:
$("a").parent()
$("a").parents()
$("a").parents("p:eq(0)")
var id=$("a").parents("p:eq(1)").children("p:eq(0)").html();


Der Der Code lautet wie folgt:

Werfen wir einen Blick auf die in früheren Projekten verwendeten Beispiele

<p id=&#39;p1&#39;>
 <p id=&#39;p2&#39;><p></p></p>
 <p id=&#39;p3&#39; class=&#39;a&#39;><p></p></p>
 <p id=&#39;p4&#39;><p></p></p>
</p>

Der Code lautet wie folgt:

$(&#39;p&#39;).parent()
$(&#39;p&#39;).parent(&#39;.a&#39;)
$(&#39;p&#39;).parent().parent()
$(&#39;p&#39;).parents()
$(&#39;p&#39;).parents(&#39;.a&#39;)


jquery-bezogener Code

Der Code lautet wie folgt: 
if(
mysql_num_rows
($query)){
  while($arr=
mysql_fetch_array
($query)){
echo <<<admin
          <tr style="
text-align
:center;">
            <td><input type="checkbox" name="checkbox" value="$arr[id]" /></td>
            <td>$arr[id]</td>
            <td>$arr[log]</td>
            <td>$arr[ip]</td>
            <td>$arr[time]</td>
            <td><form><input type="hidden" name="id" value="$arr[id]" /><span class="del">删除</span><img src="images/del.gif" /></form></td>
          </tr>
admin;
  }//while end;
}else{
  echo "<tr align=center><td colspan=6>暂无登陆日志</td></tr>";
}



Beteiligte Wissenspunkte: 

//删除选中日志$(".delcheckbox").click(function(){    var str=&#39;&#39;;    $(".tab input[name=checkbox]:checked").each(function(){        str+=$(this).val()+&#39;,&#39;;    });    str=str.substring(0,str.length-1);    if(chk_Batch_PKEY(str)){        art.dialog.confirm(&#39;你确认删除选中的日志吗？&#39;,function(){            $.post("myRun/managerlog_del.php",{id:str},function(tips){                if(tips==&#39;ok&#39;){                    art.dialog.through({title:&#39;信息&#39;,icon:&#39;face-smile&#39;,content:&#39;删除成功&#39;,ok:function(){art.dialog.close();location.reload();}});                }else{                    art.dialog.tips(&#39;删除失败&#39;);                }            });            return true;        });    }else{        art.dialog.through({title:&#39;信息&#39;,icon:&#39;face-sad&#39;,content:&#39;请选择删除的日志&#39;,ok:function(){art.dialog.close();}});    }}).addClass("pointer");
//del event$(".del").bind("click",function(event){    var _tmpQuery=$(this);    var id=$("input[name=&#39;id&#39;]",$(this).parents("form:first")).attr("value");    art.dialog.confirm(&#39;你确认删除该日志吗？&#39;,function(){        $.post("myRun/managerlog_del.php",{id:id},function(tips){            if(tips==&#39;ok&#39;){                art.dialog.tips(&#39;成功删除&#39;);                _tmpQuery.parents(&#39;tr:first&#39;).hide();            }else{                art.dialog.tips(tips,5);            }        });        return true;    });});
Var-ID =$("input[name='id']",$(this) .parents("form:first")).attr("value");


Referenz:

parent(): http://www.w3school.com cn/jquery/traversing_parent.asp

parents(): http://www.w3school.com.cn/jquery/traversing_parents. asp


parentsUntil()-Methode

Definition: parentUntil() Ruft die Vorgängerelemente jedes Elements im aktuellen Satz übereinstimmender Elemente ab, bis zu (aber (ohne) das Element, das mit einem Selektor, DOM-Knoten oder einem jQuery-Objekt übereinstimmt.


Tatsächlich haben die parentUntil()-Methode, die nextUntil()-Methode und die prevUntil()-Methode dasselbe Prinzip. Der einzige Unterschied besteht darin, dass nextUntil() nach unten geht, prevUntil() nach oben geht (Geschwisterelemente) und parentUntil() ebenfalls nach oben geht (Vorfahrenelemente finden) Sehen Sie sich unten ein Beispiel an:

Der Code lautet wie folgt:


Das Ergebnis ist wie folgt:

Analyse: 
<!DOCTYPE html><html><head>  <script type="text/javascript" src="/jquery/jquery.js"></script></head>
<body><ul class="level-1 yes">  <li class="item-i">I</li>  <li class="item-ii">II    <ul class="level-2 yes">      <li class="item-a">A</li>      <li class="item-b">B        <ul class="level-3">          <li class="item-1">1</li>          <li class="item-2">2</li>          <li class="item-3">3</li>        </ul>      </li>      <li class="item-c">C</li>    </ul>  </li>  <li class="item-iii">III</li></ul>
<script>$("li.item-a").parentsUntil(".level-1").css("background-color", "red");
$("li.item-2").parentsUntil( $("ul.level-1"), ".yes"  )  .css("border", "3px solid blue");</script>
</body>


Der Code lautet wie folgt:
$("li.item-a").parentsUntil(".level-1").css("background-color", "red");

Der Code lautet wie folgt:

Sehen Sie sich die zweite Aussage an:

Der Code lautet wie folgt:
<ul class="level-1 yes"> -->不符合。其实它是符合li.item-a的祖先元素的。但是根据parentsUntil()方法定义，是不包括选择器、DOM节点或jquery对象所匹配的元素的
  <li class="item-i">I</li>-->不符合，这是它祖先元素的同辈元素。并不是li.item-a的祖先元素。
  <li class="item-ii">II  -->符合
    <ul class="level-2 yes"> -->符合
      <li class="item-a">A</li> -->从这开始往上找其祖先元素。
      <li class="item-b">B
        <ul class="level-3">
          <li class="item-1">1</li>
          <li class="item-2">2</li>
          <li class="item-3">3</li>
        </ul>
      </li>
      <li class="item-c">C</li>
    </ul>
  </li>
  <li class="item-iii">III</li>
</ul>


Der Code lautet wie folgt:

$("li.item-2").parentsUntil( $("ul.level-1"), ".yes"  ).css("border", "3px solid blue");

Das obige ist der detaillierte Inhalt vonDer Unterschied zwischen parent() und parent() beim JQuery-Traversal und die ausführliche Erklärung der parentUntil()-Methode. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Tutorial zur Verwendung der parentUntil()-Methode in jQueryNächster Artikel：Tutorial zur Verwendung der parentUntil()-Methode in jQuery

In Verbindung stehende Artikel

Mehr sehen