学习JQuery - 16

浏览数：22 / 时间：2015年06月09日

3. 其他DOM方法

（1）each()

each(index, Element)

index：遍历索引

Element：执行遍历的元素；大部分我们使用“this”标识符。

我们需要在span原来的位置加入上数字，以标识。

js代码

	var $notes = $(‘<ol id="notes"></ol>‘).insertBefore(‘#footer‘);
	$(‘span.footnote‘).each(function(index, element) {
		$(‘<sup>‘ + (index + 1) + ‘</sup>‘).insertBefore(this);
        $(this).appendTo($notes).wrap(‘<li></li>‘);
    });

实现效果如下：

Flatland: A Romance of Many Dimensions

by Edwin A. Abbott

Part 1, Section 3

Concerning the Inhabitants of Flatland

an excerpt

Our Professional Men and Gentlemen are Squares (to which class I myself belong) and Five-Sided Figures or Pentagons.

Next above these come the Nobility, of whom there are several degrees, beginning at Six-Sided Figures, or Hexagons, and from thence rising in the number of their sides till they receive the honourable title of Polygonal, or many-Sided. Finally when the number of the sides becomes so numerous, and the sides themselves so small, that the figure cannot be distinguished from a circle, he is included in the Circular or Priestly order; and this is the highest class of all.

It is a Law of Nature with us that a male child shall have one more side than his father, so that each generation shall rise (as a rule) one step in the scale of development and nobility. Thus the son of a Square is a Pentagon; the son of a Pentagon, a Hexagon; and so on.

But this rule applies not always to the Tradesman, and still less often to the Soldiers, and to the Workmen; who indeed can hardly be said to deserve the name of human Figures, since they have not all their sides equal. With them therefore the Law of Nature does not hold; and the son of an Isosceles (i.e. a Triangle with two sides equal) remains Isosceles still. Nevertheless, all hope is not such out, even from the Isosceles, that his posterity may ultimately rise above his degraded condition.…

Rarely—in proportion to the vast numbers of Isosceles births—is a genuine and certifiable Equal-Sided Triangle produced from Isosceles parents. ¹ Such a birth requires, as its antecedents, not only a series of carefully arranged intermarriages, but also a long-continued exercise of frugality and self-control on the part of the would-be ancestors of the coming Equilateral, and a patient, systematic, and continuous development of the Isosceles intellect through many generations.

The birth of a True Equilateral Triangle from Isosceles parents is the subject of rejoicing in our country for many furlongs round. After a strict examination conducted by the Sanitary and Social Board, the infant, if certified as Regular, is with solemn ceremonial admitted into the class of Equilaterals. He is then immediately taken from his proud yet sorrowing parents and adopted by some childless Equilateral. ²

How admirable is the Law of Compensation! ³ By a judicious use of this Law of Nature, the Polygons and Circles are almost always able to stifle sedition in its very cradle, taking advantage of the irrepressible and boundless hopefulness of the human mind.…

Then the wretched rabble of the Isosceles, planless and leaderless, are ether transfixed without resistance by the small body of their brethren whom the Chief Circle keeps in pay for emergencies of this kind; or else more often, by means of jealousies and suspicious skillfully fomented among them by the Circular party, they are stirred to mutual warfare, and perish by one another‘s angles. No less than one hundred and twenty rebellions are recorded in our annals, besides minor outbreaks numbered at two hundred and thirty-five; and they have all ended thus.

"What need of a certificate?" a Spaceland critic may ask: "Is not the procreation of a Square Son a certificate from Nature herself, proving the Equal-sidedness of the Father?" I reply that no Lady of any position will marry an uncertified Triangle. Square offspring has sometimes resulted from a slightly Irregular Triangle; but in almost every such case the Irregularity of the first generation is visited on the third; which either fails to attain the Pentagonal rank, or relapses to the Triangular.
The Equilateral is bound by oath never to permit the child henceforth to enter his former home or so much as to look upon his relations again, for fear lest the freshly developed organism may, by force of unconscious imitation, fall back again into his hereditary level.
And how perfect a proof of the natural fitness and, I may almost say, the divine origin of the aristocratic constitution of the States of Flatland!

（2）html()

使用空参数我们可以读取到元素的内容；这时等同于text()。

js代码

console.log(index + ‘: ‘ + $(element).html());

使用参数时，可以设置HTML元素及内容；

js代码

$(‘a[href*="web"]‘).html(‘<a href="#top">This is href</a>‘);

附：

chapter05-3.js

$(document).ready(function() {
    $(‘<a href="#top">back to top</a>‘).insertAfter(‘div.chapter p‘);
	$(‘<a id="top"></a>‘).prependTo(‘body‘);
	//$(‘span.footnote‘).insertBefore(‘#footer‘).wrapAll(‘<ol id="notes"></ol>‘).wrap(‘<li></li>‘);
	
	var $notes = $(‘<ol id="notes"></ol>‘).insertBefore(‘#footer‘);
	$(‘span.footnote‘).each(function(index, element) {
		$(‘<sup>‘ + (index + 1) + ‘</sup>‘).insertBefore(this);
        $(this).appendTo($notes).wrap(‘<li></li>‘);
		console.log(index + ‘: ‘ + $(element).html());
    });
	
	$(‘a[href*="web"]‘).html(‘<a href="#top">This is href</a>‘);
});

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

学习JQuery - 16