jquery 选择后有多个元素取第一个

我们经常能够用jquery

获取一组dom对象，但是我们只想 *** 作第一个元素时，有什么好方法来用

jquery

第一个元素的呢，用jquery

第一个元素很简单，用到了筛选的方法，假设有这样一段一组列表：

<ul>

<li>11</li>

<li>22</li>

<li>33</li>

<li>44</li>

<li>55</li>

</ul>

我们要取到11

所在的

li

元素，有一下几种方法：

$('ul')find('li:first');

$('ul

li:first');

$('ul

li')eq(0);

这几种方法，就是常用的

jquery

取得第一个元素的方法

转载，仅供参考。

$('#id')siblings() 当前元素所有的兄弟节点

$('#id')prev() 当前元素前一个兄弟节点

$('#id')prevaAll() 当前元素之前所有的兄弟节点

$('#id')next() 当前元素之后第一个兄弟节点

$('#id')nextAll() 当前元素之后所有的兄弟节点

这三个方法都可以添加选择器，给出选择条件，就能找到你指定的兄弟节点了。

扩展资料

1、jquery 获取元素(父节点,子节点,兄弟节点)

$("#test1")parent(); // 父节点

$("#test1")parents(); // 全部父节点

$("#test1")parents("mui-content");

$("#test")children(); // 全部子节点

$("#test")children("#test1");

$("#test")contents(); // 返回#test里面的所有内容，包括节点和文本

$("#test")contents("#test1");

$("#test1")prev();  // 上一个兄弟节点

$("#test1")prevAll(); // 之前所有兄弟节点

$("#test1")next(); // 下一个兄弟节点

$("#test1")nextAll(); // 之后所有兄弟节点

$("#test1")siblings(); // 所有兄弟节点

$("#test1")siblings("#test2");

$("#test")find("#test1");

2、元素筛选

// 以下方法都返回一个新的jQuery对象，他们包含筛选到的元素

$("ul li")eq(1); // 选取ul li中匹配的索引顺序为1的元素(也就是第2个li元素)

$("ul li")first(); // 选取ul li中匹配的第一个元素

$("ul li")last(); // 选取ul li中匹配的最后一个元素

$("ul li")slice(1, 4); // 选取第2 ~ 4个元素

$("ul li")filter(":even"); // 选取ul li中所有奇数顺序的元素

Jquery找第n个元素以后得元素方法：

(假设一共有size个元素,元素类型为 li)

第一种方法：

var ele = $("li")eq(n)

var eles = $(ele)nextAll();

第二种：使用eq()方法

for(var i = n; i < size; i++){

var ele = $("li")eq(n);

}

parent()//只会向上一级获取，只是一级

parents()//获取所有直接的上级，上级的同级元素不能获取

children()//获取所有下一级的元素，只是一级

find()//获取指定的下级，一定要指定，不然无效。如：find("span"),获取下级的所有span元素，无论在多深的下级。

siblings()//获取除了本元素以外的所有同级元素，如：你要对同级元素加上边框，这个只对同级元素有效，对本元素$(this)无效

next()//本元素的向下数第一个同级元素

nextAll()//所有在本元素下面的同级元素

nextUntil()//介于两个同级元素之间的同级元素。如：$("span")nextUntil("p") span和p必须是同级元素，然后获取span和p之间的同级元素

prev()//和next()相反

prevAll()//和nextAll()相反

prevUntil()//和nextUntil()相反，注：这个相反有点出入，最好自己先测试一遍再使用

first()//获取选中元素第一个（同级之间的）

last()//获取被选元素的最后一个（同级之间的）

eq(1)//获取被选元素的第2个，注：元素是从0开始数起的

filter("css")//获取被选元素的同级所有带有css类的

not()//和filter()相反

这是我之前学jquery自己总结的一部分，你可以参考一下。

更详细和专业的解析你可以去这里看一下：>

下面写个例子来获取id为demo的元素的第一个子元素。

<!--加载jquery-->

<script src=";

说明一下以上例子中用到选择器

#demo是id选择器获取id为demo的元素

>是子选择器获取所有子级

:first是首项选择器获取第一个元素

三者结合起来就是获取id为demo的元素的所有子元素中的第一个元素。

其实jquery的选择器有很多，包括：

:last获取最后一个元素

:eq(index)获取第index个选择器

更多可以直接百度搜索“jquery选择器”来查看。

<div>

 

<p>1</p>

 

<p>2</p>

 

<p>3</p>

 

<p>4</p>

 

<p>5</p>

</div>

取倒数第二个p元素

$("div p")eq(-2)

jQuery:

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档 *** 作、事件处理、动画设计和Ajax交互。

jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 60+、FF 15+、Safari 20+、Opera 90+等。

语言特点:

1快速获取文档元素

jQuery的选择机制构建于Css的选择器，它提供了快速查询DOM文档中元素的能力，而且大大强化了JavaScript中获取页面元素的方式。

2提供漂亮的页面动态效果

jQuery中内置了一系列的动画效果，可以开发出非常漂亮的网页，许多网站都使用jQuery的内置的效果，比如淡入淡出、元素移除等动态特效。

3创建AJAX无刷新网页

AJAX是异步的JavaScript和ML的简称，可以开发出非常灵敏无刷新的网页，特别是开发服务器端网页时，比如PHP网站，需要往返地与服务器通信，如果不使用AJAX，每次数据更新不得不重新刷新网页，而使用AJAX特效后，可以对页面进行局部刷新，提供动态的效果。

4提供对JavaScript语言的增强

jQuery提供了对基本JavaScript结构的增强，比如元素迭代和数组处理等 *** 作。

5增强的事件处理

jQuery提供了各种页面事件，它可以避免程序员在HTML中添加太事件处理代码，最重要的是，它的事件处理器消除了各种浏览器兼容性问题。

6更改网页内容

jQuery可以修改网页中的内容，比如更改网页的文本、插入或者翻转网页图像，jQuery简化了原本使用JavaScript代码需要处理的方式。

你好！

获取同辈的元素，有个siblings()方法，这个可以获取到同级的所有元素;

还有prev()、next()分别获取之前和之后的元素，这是取向前或向后的一个元素;

prevAll()、nextAll()是获取之前和之后的所有同级元素;

<ul>

   <li>list item 1</li>

   <li>list item 2</li>

   <li class="third-item">list item 3</li>

   <li>list item 4</li>

   <li>list item 5</li>

</ul>

$("lithird-item")siblings(); //可以获取4个li元素

$("lithird-item")prev();   //取得item2

$("lithird-item")next();   //取得item4

$("lithird-item")prevAll();  //取得item1 itme2

$("lithird-item")nextAll();  //取得item4 item5

还有种方式就是通过siblings()方法获取到同级元素后，使用eq()方法定位元素

var $lis = $("li:last")siblings();

$liseq(0)

希望对你有帮助！

以上就是关于jquery 选择后有多个元素取第一个全部的内容，包括:jquery 选择后有多个元素取第一个、jquery如何获取某一个兄弟节点，不是全部的，是指定的兄弟节点、jquery怎么获取第n个元素以后的等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！