jQuery中nextUntil()方法用法实例

2024-04-05 07:32:04 533

本文实例讲述了jQuery中nextUntil()方法用法。分享给大家供大家参考。具体分析如下：

此函数查找指定元素之后所有的同辈元素，直到遇到匹配的那个元素为止，但不包括此匹配的元素。

语法结构一:

$(selector).closest(expr,filter)

参数列表:
参数描述 expr 用于筛选匹配元素的表达式。 filter 可选。用于筛选nextUntil()函数通过expr表达式取得的jquery元素集合。

实例代码:

实例一:


<!DOCTYPEhtml>

<html>

<head>

<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>

<metaname="author"content="https://www.nhooo.com/"/>

<title>毛票票</title>

<scripttype="text/javascript"src="mytest/jQuery/jquery-1.8.3.js"></script>

<scripttype="text/javascript">

$(document).ready(function(){

 $("li").eq(0).nextUntil(".jq").css("color","blue")

})

</script>

</head>

<body>

<div>

 <ul>

   <li>HTML专区</li>

   <liclass="js">Javascript专区</li>

   <li>Div+Css专区</li>

   <liclass="jq">Jquery专区</li>

   <li>ASP专区</li>

   <li>JSP专区</li>

 </ul>

</div>

</body>

</html>

实例二:


<!DOCTYPEhtml>

<html>

<head>

<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>

<metaname="author"content="https://www.nhooo.com/"/>

<title>毛票票</title>

<scripttype="text/javascript"src="mytest/jQuery/jquery-1.8.3.js"></script>

<scripttype="text/javascript">

$(document).ready(function(){

 $("li").eq(0).nextUntil(".jq",".js").css("color","blue")

})

</script>

</head>

<body>

<div>

 <ul>

   <li>HTML专区</li>

   <liclass="js">Javascript专区</li>

   <li>Div+Css专区</li>

   <liclass="jq">Jquery专区</li>

   <li>ASP专区</li>

   <li>JSP专区</li>

 </ul>

</div>

</body>

</html>

语法结构二:


$(selector).closest(element,filter)

参数列表:
参数描述 element 用于筛选匹配元素的DOM对象。 filter 可选。用于筛选nextUntil()函数通过DOM对象取得的jquery元素集合。

实例代码:

实例一:


<!DOCTYPEhtml>

<html>

<head>

<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>

<metaname="author"content="https://www.nhooo.com/"/>

<title>毛票票</title>

<scripttype="text/javascript"src="mytest/jQuery/jquery-1.8.3.js"></script>

<scripttype="text/javascript">

$(document).ready(function(){

 $("li").eq(0).nextUntil(document.getElementById("jq")).css("color","blue")

})

</script>

</head>

<body>

<div>

 <ul>

   <li>HTML专区</li>

   <liclass="js">Javascript专区</li>

   <li>Div+Css专区</li>

   <liid="jq">Jquery专区</li>

   <li>ASP专区</li>

   <li>JSP专区</li>

 </ul>

</div>

</body>

</html>

实例二:


<!DOCTYPEhtml>

<html>

<head>

<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>

<metaname="author"content="https://www.nhooo.com/"/>

<title>毛票票</title>

<scripttype="text/javascript"src="mytest/jQuery/jquery-1.8.3.js"></script>

<scripttype="text/javascript">

$(document).ready(function(){

 $("li").eq(0).nextUntil(document.getElementById("jq"),".js").css("color","blue")

})

</script>

</head>

<body>

<div>

 <ul>

   <li>HTML专区</li>

   <liclass="js">Javascript专区</li>

   <li>Div+Css专区</li>

   <liid="jq">Jquery专区</li>

   <li>ASP专区</li>

   <li>JSP专区</li>

 </ul>

</div>

</body>

</html>

希望本文所述对大家的jQuery程序设计有所帮助。

jQuery中nextUntil()方法用法实例

热门推荐

随机推荐