jquery获取元素父节点

有文件的结构如下：

 <div class="level-1">
  		<tr class="tr1">
  			<td class="td1">1</td>
  			<td class="td2">2</td>
  			<td class="td3">3</td>
  			<td class="td4">4</td>
  		</tr>
  		<tr class="tr2">
  			<td class="td1">
  				<span class="span1">5</span>
  			</td>
  			<td class="td2">6</td>
  			<td class="td3">7</td>
  			<td class="td4">8</td>
  		</tr>
     </div>

1. 获取父级元素-----parent()

//获取td2节点的父节点即tr1，并将背景颜色的样式改为黑色     
$('.td2').parent().css('background-color', 'black');

另外：parent([document])方法取得一个包含着所有匹配元素的唯一父元素的元素集合。

比如对于下述html

<div><p>Hello</p></div><div class="selected"><p>Hello Again</p></div>

则

$("p").parent(".selected")

则是获取p标签的父元素中每个class为selected的父元素。

.closest(seletor) 方法获得匹配选择器的第一个祖先元素，从当前元素开始沿 DOM 树向上。

<ul id="one" class="level-1">
  <li class="item-i">I</li>
  <li id="ii" class="item-ii">II
  <ul class="level-2">
    <li class="item-a">A</li>
    <li class="item-b">B
      <ul class="level-3">
        <li class="item-1">1</li>
        <li class="item-2">2</li>
        <li class="item-3">3</li>
      </ul>
    </li>
    <li class="item-c">C</li>
  </ul>
  </li>
  <li class="item-iii">III</li>
</ul>

//将class为level-2 的<ul>变为红色，因为他是向上搜索时遇到的第一个元素。
$('li.item-a').closest('ul').css('background-color', 'red');

二。同级元素

.next(selector)
获得匹配元素紧邻的下一个同胞元素。如果提供选择器，则取回匹配该选择器的下一个同胞元素。

<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>
//将list -item4便为红色
$( "li.third-item" ).next().css( "background-color", "red" );

.nextAll(selector)
获得匹配元素后面的所有同胞元素，由选择器筛选是可选的。

<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>
//将list -item4、list-item5便为红色
$( "li.third-item" ).nextAll().css( "background-color", "red" );

.prev(selector)
获得匹配元素紧邻的前一个同胞元素（与next相反,则根据上述next例子反着来就可以了）

.prevAll(selector)
获得当前匹配元素前面的所有同胞元素（同上）

三、获取子元素

.children(selector)
返回匹配元素的子元素，添加可选参数可通过选择器进行过滤。

<ul class="level-1">
  <li class="item-i">I</li>
  <li class="item-ii">II
    <ul class="level-2">
      <li class="item-a">A</li>
      <li class="item-b">B
        <ul class="level-3">
          <li class="item-1">1</li>
          <li class="item-2">2</li>
          <li class="item-3">3</li>
        </ul>
      </li>
      <li class="item-c">C</li>
    </ul>
  </li>
  <li class="item-iii">III</li>
</ul>

//将A, B, C 的背景颜色变成红色
$('ul.level-2').children().css('background-color', 'red');

.find(selector)
获得当前元素的后代

<ul class="level-1">
  <li class="item-i">I</li>
  <li class="item-ii">II
    <ul class="level-2">
      <li class="item-a">A</li>
      <li class="item-b">B
        <ul class="level-3">
          <li class="item-1">1</li>
          <li class="item-2">2</li>
          <li class="item-3">3</li>
        </ul>
      </li>
      <li class="item-c">C</li>
    </ul>
  </li>
  <li class="item-iii">III</li>
</ul>
//将A、B、1、2、3 以及 C设置为红色背景
$('li.item-ii').find('li').css('background-color', 'red');

知秋君

相关推荐