suchen

Heim >Web-Frontend >js-Tutorial >Detaillierte Erläuterung der Verwendung der next()-Funktion von jQuery

Detaillierte Erläuterung der Verwendung der next()-Funktion von jQuery

黄舟
黄舟Original
2016-12-15 14:51:262061Durchsuche

Detaillierte Erläuterung der Verwendung der Funktion next() von jQuery:
Diese Funktion hat eine große Anzahl von Anwendungen im Code. Die Verwendung dieser Funktion wird im Folgenden anhand von Beispielen vorgestellt.
Es kann ein Elementsatz erhalten werden, der die unmittelbar folgenden Geschwisterelemente jedes Elements im übereinstimmenden Elementsatz enthält.
Im obigen Konzept gibt es die folgenden Punkte, die besondere Aufmerksamkeit erfordern:
1. „Angrenzend“, das heißt, das erhaltene Element muss unmittelbar neben dem passenden Element liegen und es dürfen keine anderen Elemente vorhanden sein dazwischen.
2. „Ähnlich“, das heißt, das erhaltene Element muss auf derselben Ebene wie das übereinstimmende Element sein.
3. „Hinter“ bedeutet, dass sich das erhaltene Element hinter dem passenden Element befinden muss.
Grammatikstruktur:

$(selector).next(exPR)

Parameterliste:

Parameterbeschreibung

expr Optional. Filterausdruck.

Beispielcode:
Beispiel 1:

<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/CSS">.father{
  height:200px;
  width:200px;
  border:1px solid blue;}</style><script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script><script type="text/Javascript">$(document).ready(function(){
  $("p").next().css("color","blue")
})</script> </head><body><div class="father"><p>我是p元素</p><span>我是span元素</span><p>我是p元素</p><div>我是div元素</div></div></body></html>

Der obige Code kann die Schriftfarbe aller gleichgeordneten Elemente direkt hinter dem p-Element auf Blau setzen.
Beispiel 2:

<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">.father{
  height:200px;
  width:200px;
  border:1px solid blue;}</style><script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script><script type="text/javascript">$(document).ready(function(){
  $("p").next("span").css("color","blue")
})</script> </head><body><div class="father">
  <p>我是p元素</p>
  <span>我是span元素</span>
  <p>我是p元素</p>
  <div>我是div元素</div></div></body></html>

Der obige Code kann die Schriftbeugung des span-Elements im Geschwisterelement direkt hinter dem p-Element auf Blau setzen.
Beispiel 3:

<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">*{
  margin:0px;
  padding:0px;
  font-size:14px;}ul{list-style:none;}.main .nav{
  width:100px;
  margin:0px auto;
  margin-top:3px;}.main .nav a{
  width:100px;
  height:25px;
  line-height:25px;
  text-align:center;
  text-decoration:none;
  background-color:green;
  display:block;}.main .nav .navcontent{display:none;}</style><script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script><script type="text/javascript">$(document).ready(function()
{  var navs=$(".nav");  var navcontents=$(".navcontent");  var navlen=navs.length;
 
  $(".nav a").click(function(){    if($(this).next().css("display")=="none")
    {
      $(this).next().css("display","block")
    }    else
    {
      $(this).next().css("display","none") 
    }   
 }) 
})</script></head><body><div>
  <ul class="main">
   <li class="nav">
    <a href="#">蚂蚁部落</a>
    <ul class="navcontent">
     <li>搜索优化</li>
     <li>CSS专区</li>
     <li>asp专区</li>
    </ul>
   </li>
   <li class="nav">
    <a href="#">前台专区</a>
    <ul class="navcontent">
     <li>搜索优化</li>
     <li>CSS专区</li>
     <li>ASP专区</li>
    </ul>
   </li>
   <li class="nav">
    <a href="#">后台专区</a>
    <ul class="navcontent">
     <li>搜索优化</li>
     <li>CSS专区</li>
     <li>ASP专区</li>
    </ul>
   </li>
  </ul></div></body></html>

Der obige Code implementiert ein sekundäres Menü, das die Funktionsanwendung next() enthält. Weitere verwandte Artikel finden Sie im PHP-Chinesisch Website (www.php.cn)!


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：jQuery-DokumentverarbeitungNächster Artikel：jQuery-Dokumentverarbeitung

In Verbindung stehende Artikel

Mehr sehen