jquery如何获取第一个或最后一个子元素

var alldiv = $("div");

var firstdiv = alldiv[0];

var lastdiv = alldiv[alldivlength-1];

注意，jquery数组返回的是标准的documentObject，也就是说，firstdiv与lastdiv都是类似通过

documentgetElementById这个方式获得到的对象，是不能直接使用JQ方法的

解决办法很简单 $(firstdiv)即可

可以使用css选择器 last-child 实现：

$("ul li:last-child");    // 指定属于父元素ul的最后一个子元素li

示例代码如下

创建Html元素

<div class="box">

<span>点击按钮获取每个ul下的最后一个元素：</span><br>

<div class="content">

<ul>

  <li>John</li>

  <li>Karl</li>

  <li>Brandon</li>

</ul>

<ul>

  <li>Glen</li>

  <li>Tane</li>

  <li>Ralph</li>

  <li>Ralph</li>

</ul>

<ul>

  <li>John</li>

  <li>Karl</li>

  <li>Brandon</li>

</ul>

</div>

<input type="button" value="获取每个ul下的最后一个元素">

</div>

设置css样式

divbox{width:300px;padding:20px;margin:20px;border:4px dashed #ccc;}

divbox span{color:#999;font-style:italic;}

divcontent{width:250px;margin:10px 0;padding:20px;border:2px solid #ff6666;}

input[type='button']{height:30px;margin:10px;padding:5px 10px;}

ul{padding:5px 25px;border:2px dashed #cc6699;}

red{color:red;}

编写jquery代码

$(function(){

$(":button")click(function() {

$("ul li:last-child")addClass('red');          // 设置样式

str = $("ul li:last-child")map(function(){     // 获取最后一个锂元素的内容

return $(this)text();

})get()join(',');

alert(str)

});

})

观察效果

初始状态

点击按钮后效果

Jquery获取子元素的方法有2种，分别是children()方法和find()方法。下面我们分别来使用这两种方法，看看它们有何差异。

children()方法：获取该元素下的直接子集元素

find()方法：获取该元素下的所有子集元素

这样：

<script type="text/javascript">

     $(function () {

         $("#div1")next()addClass("am-active"); 获得div1的下一个元素

         $("#div1")next()find("dd")addClass("am-in");   获得div1下一个元素的 指定子元素

})     

 </script>

扩展资料：

注意事项

通常，选择一个元素很简单，$("#id")就可以搞定，但是如果想选择某个id为x1的div下的某个id为x2的元素就很困难了，可以通过用find来解决这个问题。

例如：

html代码如下：

<div id="test">

  <div id="div1">第一行</div>

  <div id="div2">

      <p id="p1">第1行</p>

      <p id="p2">第2行</p>

      <p id="p3">第3行</p>

  </div>

  <div id="div3">第三行</div>

</div>

常见的方法是使用children()方法或者fand()方法都是可以获取到某个元素的子元素的,children() 方法返回匹配元素集合中每个元素的子元素，find()方法获得当前元素集合中每个元素的后代，通过选择器、jQuery 对象或元素来筛选。

jquery中获取当前dom元素的子元素的方法有很多，常见的方法是使用children()方法或者fand()方法都是可以获取到某个元素的子元素的,children() 方法返回匹配元素集合中每个元素的子元素，find()方法获得当前元素集合中每个元素的后代，通过选择器、jQuery 对象或元素来筛选。

一、使用children()方法获得子元素

1、使用该方法获取子元素并设置子元素的字体为蓝色，代码如下：

2、运行的效果如下图：

二、使用find()方法获取子元素

1、使用fand()方法获取子元素并且进行选择器的筛选，代码如下图：

2、运行的结果如下图：

参考资料

博客博客[引用时间2018-1-9]

Jquery实战

基本的CSS选择器

熟悉web开发的人员一定对css的选择功能相当的了解，通过css选择功能，我们可以在css样式文件里轻松的将样式应用到选择的页面元素上。jQuery也正是采用了这样的机制，使jQuery的元素选择能力易常强大。

a——选择所有元素

#specialID——选择匹配id为specialID的元素

specialClass——选择匹配拥有css类sepcialClass的元素

a#specialIDspecialClass——选择匹配id为specialID、有用css类specialClass的元素

p aspecialClass——匹配拥有css类specialClass、在

元素内的元素

除了支持传统的css选择器，Jquery还支持CSS3选择功能。

子节点选择器

$("p > a") 选择元素

的直接子节点的元素，非直接子节点的元素将不会被选择到

特性选择器

特性选择器在匹配的选择元素上过滤满足某特性(属性)的元素

如我们需要做如下的'选择：匹配所有指向本网站之外地址的链接，我们可以这样选择

$("a[href^=>

方法有很多种的，我的方案是：

通过当前选择元素，查找其父元素，然后再查找这个父元素的最后一个子元素

例如：

<div id="oDiv">

    <p id="p1"></p>

    

    <a name="a1" href="" id="a1"></a>

</div>

如要选择id为p1的p标签的最后一个兄弟元素

jquery写法如下：

$("#p1")parent()last();

结果:

<a name="a1" href="" id="a1"></a>

$('#1')parent()find('>li:last')css('background-color', 'red');

这样用 > 号获取最接近的子元素

以上就是关于jquery如何获取第一个或最后一个子元素全部的内容，包括:jquery如何获取第一个或最后一个子元素、如何用jquery获得每个ul下最后一个li、jquery怎么获取元素的子元素等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！