`
sunzhen930
  • 浏览: 35672 次
  • 性别: Icon_minigender_1
  • 来自: 沈阳
社区版块
存档分类
最新评论

jQuery利用选择器选择同一类下的第N个元素

阅读更多
  大家知道$(".xxxx")选择器是用来选择一个网页中class的值为xxxx的页面元素,如果在一个网页中存在多个class="xxxx"的元素,我们可能需要选择其中的某一个元素,比如最简单的幻灯片样式
 
<div class="demo">
  <img src="demo/demo1.png">
</div>
<div class="demo">
  <img src="demo/demo2.png">
</div>
<div class="demo">
  <img src="demo/demo3.png">
</div>
<div class="demo">
  <img src="demo/demo4.png">
</div>
  

我们想把这四个DIV做成轮流显示,就需要选择其中的一个,也就是用到了找到同样class的第N个元素了,我们可以使用jQuery的eq gt lt 等表达式来进行操作js代码如下:
$(document).ready(function(){
  $(".demo").hide();
  $(".demo:eq(0)").show();
  var n = 0;
  setTimeout(function(){
    n++;
    $(".demo").hide();
    var str = ".demo:eq("+n+")";
    $(str).show();
    if(n == 3){
      n = 0;
    }
  },5000)
});

其中的   $(".demo:eq(n)")就是获得同样class的第N个元素。
分享到:
评论

相关推荐

    jquery选择器入门详解小案例

    jQuery支持多种CSS选择器,包括基本选择器、层次选择器、属性选择器和类选择器等。这些选择器可以帮助我们更精确地定位到我们需要操作的DOM元素。 1. **基本选择器**: - `$("#id")`:通过ID选择元素,例如`$("#...

    jquery CSS和xpath选择器.pdf

    jQuery是一个广泛使用的JavaScript库,它的核心功能之一就是强大的选择器引擎。这个引擎不仅支持CSS1-3的选择器语法,还兼容XPath选择器,并在此基础上进行了扩展,使得开发者能更高效、精确地选取DOM元素。本文将...

    jquery CSS和xpath选择器.docx

    jQuery CSS和XPath选择器是网页开发中...在jQuery的官方文档中,你可以找到更多关于选择器的详细信息和示例,这将帮助你更熟练地利用这些工具来操作DOM元素。了解并熟练掌握这些选择器,将极大地提升你的前端开发效率。

    jQuery Selectors(选择器)的使用(七、子元素篇)

    jQuery选择器是jQuery库中一个非常强大的特性,它允许开发者以非常高效和简洁的方式选取DOM元素集合。选择器可以看作是用特定的规则来查找页面元素的方式。在本系列文章中,将会逐一介绍和演示jQuery选择器的使用...

    jQuery选择

    - 如果页面中有多个相同的元素,并且这些元素都有多个同级元素,则该选择器会分别选取每个父元素下的第一个子元素。 4. **`:last-child`**:选取每个父元素下的最后一个子元素。 5. **`:only-child`**:选取那些...

    jQuery学习文档

    例如,在处理一个具有多个同类型元素的列表时,可以利用类选择器选取这些元素,并通过回调函数在`.each()`方法中对其进行遍历和操作。又或者,在处理表单验证时,可以借助表单选择器迅速定位到特定的表单元素,并...

    jQuery+css last-child实现选择最后一个子元素操作示例

    本示例将详细介绍如何利用jQuery结合CSS的`:last-child`伪类选择器来选取并操作页面上的最后一个子元素。`:last-child`伪类在CSS中用于选取其父元素的所有子元素中的最后一个子元素。 首先,让我们理解一下标题和...

    jquery 选择符

    - **作用**:选择每个父元素下的第 n 个子元素。 - **示例**:`li:nth-child(2)` 选取每个父元素下的第二个 `li` 元素。 **1.7 :nth-child(even|odd)** - **作用**:选取偶数或奇数位置的子元素。 - **示例**:`li...

    jQuery 顺便学习下CSS选择器 奇偶匹配nth-child(even)

    其中,nth-child是一个常用的伪类选择器,允许开发者根据元素在其父元素中的位置来选择元素。今天我们就通过学习jQuery的时候,一起深入了解CSS选择器中nth-child的奇偶匹配用法,特别是在CSS3标准中的强大功能。 ...

    jQuery过滤选择器详解

    例如,`:first`选择第一个匹配元素,`:last`选择最后一个匹配元素,`:not(s)`排除所有匹配选择器s的元素。还有`:even`、`:odd`、`:eq(index)`、`:gt(index)`、`:lt(index)`等,分别用于选择索引值为偶数、奇数、等于...

    jquery 选择器部分整理

    jQuery选择器是jQuery库中最基本且强大的特性之一,它允许开发者快速准确地选取和操作DOM元素。在详细解读jQuery选择器之前,首先需要了解jQuery本身是一个JavaScript库,它通过简化的选择器和方法来简化HTML文档...

    jquery使用方法案例

    - **第 N 个子元素**:`$("# orderedlist li:nth-child( N ) ")` 选取 `id="orderedlist"` 下的第 N 个 `&lt;li&gt;`。 - **唯一子元素选择器**:`$(" button:only-child ")` 匹配那些为父元素唯一子元素的 `&lt;button&gt;` ...

    Jquery学习笔记分享

    3. **层次选择器**:如`parent &gt; child`(父元素下的子元素)、`prev + next`(前一个元素之后的元素)和`prev ~ siblings`(前一个元素之后的所有兄弟元素)。 4. **过滤选择器**:用于进一步筛选出特定的元素,如...

    JQ选择器_选择同类元素的第N个子元素的实现方法

    本文将详细介绍如何使用jQuery选择器来选取同类元素中的第N个子元素,并通过一个实例来演示其具体实现方法。 首先,我们要明确jQuery选择器的基本语法。jQuery提供了多种选择器,如ID选择器 (#id),类选择器 (....

    了解了这些才能开始发挥jQuery的威力

    过滤选择器:如选择第一个(`:first`)、最后一个(`:last`)、不是(`:not`)、偶数(`:even`)、奇数(`:odd`)、等于特定索引(`:eq(n)`)、大于特定索引(`:gt(n)`)、小于特定索引(`:lt(n)`)和表头(`:header...

    jquery插件 N级导航栏

    本主题聚焦于一个特定的jQuery插件——"N级导航栏",该插件专为构建多级菜单导航系统而设计,适用于网站头部或侧边栏,以提供用户友好的浏览体验。 这个插件的核心功能在于它能处理任意数量的导航层级,这意味着你...

    jQueryAPI-1.41

    1.41版本中包括ID选择器(#id)、类选择器(.class)、标签选择器(tag)、属性选择器([attr=value])等,以及组合选择器,如:$(“div p”)选取所有div内的p元素。此外,还支持CSS3选择器,如::nth-child(n)、:...

    jQuery实现动态给table赋值的方法示例

    此外,这个示例还展示了jQuery的一些基本用法,如选择器(如`$("#template")`)、遍历(`$.each()`)、DOM操作(`clone()`, `find()`, `text()`, `appendTo()`)等。了解和熟练掌握这些基础功能,能够帮助开发者更...

    JQuery自学第二天.docx

    ="example"&gt;这是一个示例文本&lt;/span&gt;\n\n在学习JQuery的过程中,首先需要理解JQuery与原生JavaScript之间的主要区别。原生JavaScript的入口函数,如`window.onload`或`document.DOMContentLoaded`,会在DOM元素及...

    VS2010 VS2012最好用的JQuery代码段

    3. **$(ele)**:用于创建一个表示DOM元素的jQuery对象。 4. **each**:遍历集合中的每个元素并执行指定的函数。 5. **click**:为元素绑定点击事件。 6. **ajax**:发起一个Ajax请求。 7. **append**:向元素内部...

Global site tag (gtag.js) - Google Analytics