Jquery获取第一个子元素

简述

1、如获取id为divId的div下的第一个子div

$("#divId").children("div").get(0)

2、得到的是一个dom对象，如果要得到Jquery对象，要使用

$($("#divId").children("div").get(0))

 

实际应用场景

在使用AngularJS构建了一个表格，如下图

 

具体的程序代码：

<table class="table table-striped table-bordered mytable">
   <thead>
   <tr>
      <th>SKU_ID</th>
      <th>标题</th>
      <th>查看详情</th>
   </tr>
   </thead>
   <tbody>
   <tr style="height: 80px;" ng-repeat="similarTV in similarTVList">
      <td style="width: 100px;">{{similarTV.sku_id}}</td>
      <td>{{similarTV.list[0].title}}</td>
      <td>
          <a ng-click="selectItem($event)" data-toggle="modal" data-target=".bs-example-modal-lg">查看</a>
      </td>
   </tr>
   </tbody>
</table>

 

 

目标

在上面的代码中，第三个td标签中的a标签点击事件调用函数 selectItem($event)中，有一部分需求是要获取tr标签下的一个个标签td的值，就是现在看到的sku_id

实现的代码：

var sku_id = $($(event.target).parent().parent().children("td").get(0)).text();

两个知识点：

1. 在AngularJS的点击事件中，在函数中获取点击的DOM方法:   函数中传入$event变量，文中即为 selectItem($event)，函数中获取DOM的方法：    $(event.target)      代表了当前的DOM
2. 获取某个标签下的第一个子元素：     $($(event.target).parent().parent().children(“td”).get(0))   不加$()是代表了元素，加上$()是代表了该DOM。