jquery's method of getting parent, sibling, and child elements

The structure of the documents is as follows:

 <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. Get the parent element - - - parent()

//Get the parent of the td2 node, tr1, and change the background color to black     
$('.td2').parent().css('background-color', 'black');  

In addition, the parent([document]) method obtains a set of unique parent elements containing all matching elements.

For example, for the following html

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

be

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

It is the parent element of each class selected in the parent element of the p tag.

The. closest(seletor) method obtains the first ancestor element of the matching selector, starting with the current element, up the DOM tree.

<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>
//Change < UL > with class level-2 to red, because it is the first element encountered when searching up.
$('li.item-a').closest('ul').css('background-color', 'red');

Two. Homogeneous elements

.next(selector)
Get the next sibling element next to the matching element. If a selector is provided, the next sibling element matching the selector is retrieved.

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

.nextAll(selector)
Obtain all sibling elements after the matching element, and it is optional to select by 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 will be red
$( "li.third-item" ).nextAll().css( "background-color", "red" );

.prev(selector)
Get the first sibling element next to the matching element (as opposed to next, the reverse is OK based on the next example above)

.prevAll(selector)
Get all sibling elements in front of the current matching element (ibid.)

3. Getting subelements

.children(selector)
Returns the child elements of the matching element, and adds optional parameters that can be filtered through the 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>

//Change the background color of A, B, C to red
$('ul.level-2').children().css('background-color', 'red');

.find(selector)
Get the descendants of the current element

<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>
//Set A, B, 1, 2, 3 and C to red background
$('li.item-ii').find('li').css('background-color', 'red');

 

Posted on Mon, 07 Oct 2019 03:35:18 -0700 by Dark.Munk