Learning JQuery-5

4. Use the DOM Traversal method

In section 2nd, we use the attribute selector to add icons,

Can we use traversal to perform such operations? The answer is yes.

Add a Traversal method after the selector, such as "filter"

$('tr').filter(':odd').addClass('alt');

In the past, we can proceed with some processing. For example, we can add an icon at the link of chapter02-1.html.

Css code

a.external {background: #fff url(images/external.png) no-repeat 100% 2px;padding-right: 16px;}

Js Code

$('a').filter(function() {        return this.hostname && this.hostname != location.hostname;    }).addClass('external');

The implementation result is as follows:

Is there any other Traversal method besides "filter? <喎?http: www.bkjia.com kf ware vc " target="_blank" class="keylink"> VcD4KPHA + expires/expires + ICAgICAgICCxyMjnyc + expires/bwny6ze3lfxympl + expires/expires + PHByZSBjbGFzcz0 = "brush: java;" >$: contains (Henry )'). next (). addClass ('highlight ');Effect

Shakespeare's Plays

As You Like It	Comedy
All's Well that Ends Well	Comedy	1601
Hamlet	Tragedy	1604
Macbeth	Tragedy	1606
Romeo and Juliet	Tragedy	1595
Henry IV, Part I	History	1596
Henry V	History	1599

Shakespeare's Sonnets

The Fair Youth	1-126
The Dark Lady	127-152
The Rival Poet	78-86

NextAll can be used to highlight all cells after this column.

$('td:contains(Henry)').nextAll().addClass('highlight');

Effect

Shakespeare's Plays

As You Like It	Comedy
All's Well that Ends Well	Comedy	1601
Hamlet	Tragedy	1604
Macbeth	Tragedy	1606
Romeo and Juliet	Tragedy	1595
Henry IV, Part I	History	1596
Henry V	History	1599

Shakespeare's Sonnets

The Fair Youth	1-126
The Dark Lady	127-152
The Rival Poet	78-86

When the entire column is highlighted, we need to have DOM tree knowledge!

The parent node of TH and TD is TR.

We need to use two methods: parent (), children ()

First, we locate TD; then, find her parent node (TR); finally, find this column (TD + );

Js Code

$('td:contains(Henry)').parent().children().addClass('highlight');

Effect

Shakespeare's Plays

As You Like It	Comedy
All's Well that Ends Well	Comedy	1601
Hamlet	Tragedy	1604
Macbeth	Tragedy	1606
Romeo and Juliet	Tragedy	1595
Henry IV, Part I	History	1596
Henry V	History	1599

Shakespeare's Sonnets

The Fair Youth	1-126
The Dark Lady	127-152
The Rival Poet	78-86