jQueryのnext()関数の使い方を詳しく解説-jsチュートリアル-php.cn

jQueryのnext()関数の使い方を詳しく解説

黄舟

リリース： 2016-12-15 14:51:26

オリジナル

2079 人が閲覧しました

jQuery の next() 関数の使用方法の詳細な説明:
この関数のコードには多数のアプリケーションが含まれており、この関数の使用方法を例とともに以下に紹介します。
一致する要素セット内の各要素の直後の兄弟要素を含む要素セットを取得できます。
上記の概念では、特に注意が必要な次の点があります:
1. 「隣接」、つまり、取得された要素は一致する要素のすぐ隣になければならず、間に他の要素があってはなりません。
2. 「類似」、つまり、取得される要素は一致する要素と同じレベルの要素である必要があります。
3. 「後ろ」、つまり、取得された要素が一致する要素の後ろに配置される必要があることを意味します。
構文構造:

$(selector).next(exPR)

パラメータリスト:

パラメータの説明

expr オプション。フィルター式。

コード例:
例 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>

ログイン後にコピー

上記のコードは、p 要素のすぐ後ろにあるすべての兄弟要素のフォントの色を青に設定できます。
例 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>

ログイン後にコピー

上記のコードは、p 要素のすぐ後ろにある兄弟要素のspan要素のフォント回折を青に設定できます。
例 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>

ログイン後にコピー

上記のコードは、next() 関数アプリケーションを含む 2 番目のメニューを実装しています。その他の関連記事については、PHP 中国語 Web サイト (m.sbmmt.com) に注目してください。