집 > 기사 > 웹 프론트엔드 > jQuery의 next() 함수 사용법에 대한 자세한 설명

jQuery의 next() 함수 사용법에 대한 자세한 설명

黄舟원래의: 2016-12-15 14:51:261988검색

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() 함수 응용 프로그램이 포함된 보조 메뉴를 구현합니다. 더 많은 관련 기사를 보려면 PHP 중국어에 주의하세요. 홈페이지(www.php.cn)!

성명：

이전 기사：jQuery 문서 처리다음 기사：jQuery 문서 처리