Detaillierte Erläuterung der Verwendung der next()-Funktion von jQuery-js-Tutorial-php.cn

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

黄舟

Freigeben： 2016-12-15 14:51:26

Original

2023 Leute haben es durchsucht

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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)!