Method for copying elements in DOM tree operations in jQuery _ jquery

This article describes how to copy elements in the DOM tree operation in jQuery. The example shows how to use DOM tree replication elements, for more information about how to copy elements to DOM tree operations in jQuery, see the following example. Share it with you for your reference. The specific analysis is as follows:

Copy Element

The operations mentioned above include inserting new elements, Moving Elements from one position in the document to another, and wrapping existing elements with new elements. However, the copy element operation is sometimes used. For example, you can copy the navigation menu that appears at the top of the page and place the copy on the footer. In fact, whenever you can enhance the visual effect of a page by copying elements, it is a good opportunity to reuse code. After all, if you can write code only once and let jQuery complete the replication for us, why rewrite the code twice and increase the chance of double errors?

When copying an element, you need to use the jQuery. clone () method. This method can create a copy of any Matching Element Set for future use. As before using $ () to create elements, these elements will not appear in the document until a plug-in method is applied to the copied elements.

For example, the following line of code will create

Copy of the first section in:

The Code is as follows:

$ ('P. chapter p: eq (0) '). clone ();

However, creating a copy alone is not enough to change the page content. To display the copied content on a webpage, you can add it

Front.

The Code is as follows:

$ ('P. chapter p: eq (0) '). clone (). insertBefore ('p. chapter ');

In this way, the same paragraph appears twice. It can be seen that the relationship between. clone () and the plug-in method is the same as copying and pasting.

Copy together with the event

By default, the. clone () method does not copy matching elements or events bound to their child elements. However, you can pass a Boolean parameter for this method. If you set this parameter to true, you can copy it together with Event 1, that is,. clone (true ). In this way, you can avoid the trouble of manually re-binding events after each copy.

Many websites use pullquote to emphasize small pieces of text and attract the reader's attention, just like their printed versions. A prominent reference is to extract a part of text from the body and apply a special graphic style to the text. Using the. clone () method, you can easily complete this decorative effect. First, let's take a look at the third section of the example text:

It is a Law of Nature with us that a male child shall haveOne more sideThan 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.

We noticed that this section starts with WX, And the classes in it are prepared for replication. When you paste the copied * text to another location, you also need to modify its style attributes so that it is different from the original text.
To implement this style, you must copy <3. 3.> Add a pulled class and add the following style rules for this class in the style sheet:

The Code is as follows:

. Pulled {
Position: absolute; width: 120px; top:-20px; right:-180px; padding: 20px;
Font: italic 1.2em "Times New Roman", Times, serif; background: # e5e5e5; border: 1px solid #999; border-radius: 8px;
Box-shadow: 1px 1px 8px rgba (0, 0, 0, 0.6 );
}

In this way, the pull-quote is added with a light gray background, some padding, and different fonts. More importantly, it is absolutely positioned at the top of the recent ancestor Element Located in the DOM (absolute or relative), 20px on the right, and 20px on the right. If there is no application positioning (except static) element in the ancestor Wu Su, then pull-quote will be relative toLocate Wu Su. Therefore, make sure that the position: relative style is applied to the parent element of the copied pull-quote in the jQuery code.

Calculate the CSS position

Although the position of the top edge of the pull-quote box is relatively intuitive, I am afraid it is not that easy to understand when the left side of the box is 20 pixels on the right of the parent element it locates. To obtain this number, calculate the total width of the pull-quote box, that is, the value of the width attribute plus the Left and Right padding, or 145px + 5px + 10px, and the result is 160px. When the right attribute is set for pull-quote, if the value is 0, the right side of pull-quote is aligned with the right side of its parent element. Therefore, to make the left side of the parent element 20 PX on the right side, you need to move it 20 PX longer than its total width in the opposite direction, that is,-180px.

Now let's go back to the jQuery code to see how to apply the style. First, start from the expression that matches all elements, and then apply the position: relative style to the selected elements. See the following code:

The Code is as follows:

$ (Document). ready (function (){
$ ('Span. pull-quote '). each (function (index) {var $ parentParagraph = $ (this ). parent ('P'); extends parentparagraph.css ('position', 'relative ');
});
});

Here, we also save the selector expressions that need to be used multiple times in the variable $ parentParagraph to improve performance and readability.

The next step is to create a highlighted reference to take advantage of the prepared CSS style. In this case, copy each element, add the pulled class to the obtained copy, and insert the copy to the beginning of its parent section. See the following code:

The Code is as follows:

$ (Document). ready (function (){
$ ('Span. pull-quote '). each (function (index) {var $ parentParagraph = $ (this ). parent ('P'); Specify parentparagraph.css ('position', 'relative '); var $ clonedCopy = $ (this ). clone ();
$ ClonedCopy
. AddClass ('pulled ')
. PrependTo ($ parentParagraph );
});
});

Here, we define a new variable $ clonedCopy for later use.
Because we have already set an absolute position for the copied element, it does not matter where it is located in the paragraph. According to the settings in the CSS rule, as long as it is inside the paragraph, it will be located relative to the top and right of the paragraph. Currently, the Section and the plug-in appear as follows:

I hope this article will help you with jQuery programming.