本文实例讲述了jQuery 选择器用法。分享给大家供大家参考,具体如下:

jQuery 选择器 (prev next)

定义和用法

jQuery的prev next选择器用于匹配紧接在prev元素后面的同辈next元素,将其封装为jQuery对象并返回。

注意: 选择器next的查找范围必须是与"prev元素"相邻的下一个元素,并且必须是"prev元素"的同辈元素。

语法

// 这里的prev表示具体的选择器

// 这里的next表示具体的选择器

jQuery( "prev   next" )

参数

参数 描述
prev 一个有效的选择器。
next 一个有效的选择器。

返回值

返回封装了与"prev元素"紧邻的下一个同辈元素中、符合选择器next的DOM元素的jQuery对象。

虽然与一个"prev元素"紧邻的下一个同辈元素最多只有一个,但是"prev元素"可以有多个,因此匹配到的DOM元素也可以有多个,并且都被封装在返回的jQuery对象中。

如果找不到任何相应的匹配,则返回一个空的jQuery对象

实例

以下面这段代码为例:

/* HTML代码 */
<div id="n1">
 <p id="n2" class="test">
  <span id="n3" class="a">Welcome</span>
  <span id="n4">Hello</span>
 </p>
 <p id="n5" class="detail">
  <span id="n6" class="b codeplayer">To
   <span id="n7" class="a">w3cschool.cn</span>
   <span id="n8"></span>
   <span id="n9"></span>
  </span>
 </p>
</div>
/* jQuery代码 */
<script>
// 扩展jQuery对象,添加showTagInfo()方法
// 用于将jQuery对象所有匹配元素的标识信息追加到body元素内
// 每个元素的标识信息形如:"tagName"或"tagName#id"
jQuery.fn.showTagInfo = function(){
var tags = this.map( function(){
return this.tagName   ( this.id ? "#"   this.id : "" ); 
} ).get();
$("body").append( tags.join("<br>")   "<br><br>" );
};
 
// 选择了id为n5的一个元素
$("p   p").showTagInfo();
 
// 选择了id分别为n4、n8、n9的三个元素
// n4是n3的next,n8是n7的next,n9是n8的next
$("span   span").showTagInfo();
 
// 选择了id分别为n4、n8的两个元素
// n8没有包含类名a,因此无法匹配其next——n9
$("span.a   span").showTagInfo();
 
// 返回一个空的jQuery对象
// HTML中虽然有span标签,但不是p标签的同辈元素,而是其子代或后代
$("p   span").showTagInfo();
</script>

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery页面元素操作技巧汇总》、《jQuery常见事件用法与技巧总结》、《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》及《jquery选择器用法总结》

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

jQuery 选择器用法实例分析【prev + next】的更多相关文章

  1. jquery点赞功能实现代码 点个赞吧!

    点赞功能很多地方都会出现,如何实现爱心点赞功能,这篇文章主要为大家详细介绍了jquery点赞功能实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  2. 在IOS9中的Cordova应用程序使用JQuery / Javascript的window.history问题

    在两个测试用例中唯一改变的是Cordova.js.解决方法我看到这是几个星期前,但我会发布这个,以防其他人遇到它.听起来它可能与iOS9中的哈希更改生成的导航事件有关.如果是这样,可以将其添加到index.html以禁用哈希侦听:

  3. iOS 5上的jQuery事件

    解决方法在Apple开发论坛上由一个人回答:我需要在将元素添加到DOM之后才绑定(),如下所示:

  4. Swift-ReactiveCocoa3.0二SignalProducer 2

    lift运算符|>内部也是调用了lift方法,作用是把原producer的结果transform完返回新的类型/值,再封装成新的producer返回。只有在第一个producer销毁后才会响应第二个producer。之后,每当其中一个再sendNext,都会在next回调zipwith压缩两个信号,每当两个都sendNext一次才回在next回调一次。例子:sampleOn采样,当sampleOn的信号sendNext一次,就取一次producer1的最新一次sendNext的值进行next回调takeu

  5. 如何在Swift中调用C函数

    “,选择Yes,创建SwiftCallC-Bridging-Header.h文件给工程建立一个C语言文件。跟上述步骤3类似,只不过这里选择的是C文件,这里的文件取名为CFile.c,同时自动生成CFile.h文件开始编写代码。在SwiftCallC-Bridging-Header.h文件中声明C函数,这里是voidcallCDemo()在CFile.c中定义这个函数在main.swift中调用这个C函数编译运行

  6. Swift--UINavigationController

    代码目录AppDelegate.swiftViewController.swiftNext.swift效果图

  7. Swift如何取得View所属的ViewController

    从VC取得View很容易,但有些情况下我们需要从View反向获取VC.不过在一些特殊的场合,Cocoa库帮我们想的很周到,比如在自定义view过渡动画的时候:系统在回调我们的animateTransition方法时,会传入一个context参数,从它我们可以轻松取得参与动画的toView,fromView以及它们对应的VC:但不是所有情况系统都会帮你考虑的这么周到,所以有时候还得需要自己从View

  8. RxSwift使用教程大全 韩俊强的博客

    记录大多数ReactiveX的概念和操作符。我们还需要使用KVO来检测变量的值改变。Rx就是为解决这些问题而生的。Observable理解RxSwift的关键是理解Observable的概念。使用variable的好处是variable将不会显式的发送Error或者Completed。

  9. swift – 全局函数序列(state:next :)和类型推断

    3,让seq2=4…

  10. 数组 – 封闭平面嵌套对象?

    我开始学习闭包,并希望在我正在开发的项目中实现它们,我想要一些帮助.我有一个类定义如下:我想使用闭包或更高级的函数来展平[MyObject]并将所有MyObject和subOjects连接成一个数组.我尝试使用[MyObject].flatMap(),但此操作不返回嵌套的子对象.展平递归类结构的一种方法是使用递归函数.这是我们想要展平的课程:以下是演示如何完成此操作的函数:这种方法的核心是recursiveFlat本地函数.它将嵌套对象的内容附加到结果中,然后有条件地为每个元素调用自身以添加其内容.

随机推荐

  1. js中‘!.’是什么意思

  2. Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  3. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件,感兴趣的可以动手尝试一下

  4. jquery点赞功能实现代码 点个赞吧!

    点赞功能很多地方都会出现,如何实现爱心点赞功能,这篇文章主要为大家详细介绍了jquery点赞功能实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  5. AngularJs上传前预览图片的实例代码

    使用AngularJs进行开发,在项目中,经常会遇到上传图片后,需在一旁预览图片内容,怎么实现这样的功能呢?今天小编给大家分享AugularJs上传前预览图片的实现代码,需要的朋友参考下吧

  6. JavaScript面向对象编程入门教程

    这篇文章主要介绍了JavaScript面向对象编程的相关概念,例如类、对象、属性、方法等面向对象的术语,并以实例讲解各种术语的使用,非常好的一篇面向对象入门教程,其它语言也可以参考哦

  7. jQuery中的通配符选择器使用总结

    通配符在控制input标签时相当好用,这里简单进行了jQuery中的通配符选择器使用总结,需要的朋友可以参考下

  8. javascript 动态调整图片尺寸实现代码

    在自己的网站上更新文章时一个比较常见的问题是:文章插图太宽,使整个网页都变形了。如果对每个插图都先进行缩放再插入的话,太麻烦了。

  9. jquery ajaxfileupload异步上传插件

    这篇文章主要为大家详细介绍了jquery ajaxfileupload异步上传插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. React学习之受控组件与数据共享实例分析

    这篇文章主要介绍了React学习之受控组件与数据共享,结合实例形式分析了React受控组件与组件间数据共享相关原理与使用技巧,需要的朋友可以参考下

返回
顶部