집 >웹 프론트엔드 >JS 튜토리얼 >jQuery에서 prevUntil() 메소드를 사용한 예제 분석

jQuery에서 prevUntil() 메소드를 사용한 예제 분석

巴扎黑원래의: 2017-06-24 10:05:131145검색

이 글에서는 jQuery에서 prevUntil() 메소드의 사용법을 주로 소개합니다. 조건에 따라 요소를 일치시키기 전에 모든 형제 요소를 찾는 사용 기술을 분석합니다. jQuery의 prevUntil() 메소드 사용법. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 분석은 다음과 같습니다.

이

함수 는 expr 표현식 , DOM 요소 또는 jQuery 요소와 일치하는 요소를 만날 때까지 일치하는 요소 이전의 모든 형제 요소를 검색합니다. 선택적 표현식을 사용하여 형제 요소 컬렉션을 필터링할 수 있습니다.

참고: 상위 요소에는 expr 표현식, DOM 요소 또는 jQuery 요소와 일치하는 요소가 포함되어 있지 않습니다.

문법:

문법 1:

코드는 다음과 같습니다:

$(selector).prevUntil(expr,filter)

매개변수 목록:

expr선택사항. 상위 요소를 필터링하는 데 사용되는 표현식입니다. filter선택 사항입니다. 획득한 상위 요소 컬렉션을 필터링하는 데 사용됩니다.

实例:

实例一:

代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="http://www.jb51.net/" />
<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(){
        $(".father p").prevUntil(".firstp").css("color","blue")
    })
</script>
</head>
<body>
<p class="father">
  <p class="firstp">我是p元素</p>
  <span>我是span元素</span>
  <p>我是p元素</p>
  <p>我是p元素</p>
</p>
</body>
</html>

实例二:

代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="http://www.jb51.net/" />
<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(){
        $(".father p").prevUntil(".firstp","span").css("color","blue")
    })
</script>
</head>
<body>
<p class="father">
  <p class="firstp">我是p元素</p>
  <span>我是span元素</span>
  <p>我是p元素</p>
  <p>我是p元素</p>
</p>
</body>
</html>

语法二:

代码如下:

$(selector).prevUntil(element,filter)

参数列表:

매개변수	설명

参数	描述
element	可选。用于筛选祖先元素的DOM元素或者jQuery元素。
filter	可选。用于对取得的祖先元素集合进行筛选。

实例:

实例一:

代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="http://www.jb51.net/" />
<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(){
        $(".father p").prevUntil(document.getElementById("firstp")).css("color","blue")
    })
</script>
</head>
<body>
<p class="father">
  <p id="firstp">我是p元素</p>
  <span>我是span元素</span>
  <p>我是p元素</p>
  <p>我是p元素</p>
</p>
</body>
</html>

实例二:

代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="http://www.jb51.net/" />
<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(){
        $(".father p").prevUntil(document.getElementById("firstp"),"span").css("color","blue")
    })
</script>
</head>
<body>
<p class="father">
  <p id="firstp">我是p元素</p>
  <span>我是span元素</span>
  <p>我是p元素</p>
  <p>我是p元素</p>
</p>
</body>
</html>

위 내용은 jQuery에서 prevUntil() 메소드를 사용한 예제 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：jQuery.prevUntil() 함수 인스턴스 사용법에 대한 자세한 설명다음 기사：jQuery.prevUntil() 함수 인스턴스 사용법에 대한 자세한 설명