How to copy elements in DOM tree operation in jQuery_jquery

The example in this article describes the method of copying elements in DOM tree operation in jQuery. Share it with everyone for your reference. The specific analysis is as follows:

Copy element

The aforementioned operations include inserting newly created elements, moving elements from one location to another in the document, and wrapping existing elements with new elements. However, sometimes the operation of copying elements is also used. For example, you can copy the navigation menu that appears at the top of the page and place the copy in the footer. In fact, any time you can enhance the visual impact of a page by copying an element, it's a good opportunity to reuse code. After all, why rewrite the code twice and double the chance of errors when we can just write it once and let jQuery copy it for us?

When copying elements, you need to use jQuery's .clone() method, which can create a copy of any matching element collection for future use. As before when you use $() to create elements, these elements will not appear in the document until you apply an insertion method to the copied elements.

For example, the following line of code will create a copy of the first paragraph in

:

Copy code The code is as follows:

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

But simply creating a copy is not enough to change the content of the page. If you want the copied content to be displayed on the web page, you can use the insertion method to place it in front of

.

Copy code The code is as follows:

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

In this way, the same paragraph will appear twice. It can be seen that the relationship between .clone() and the insertion method is the same as copying and pasting.

Copy together with the event

By default, the .clone() method does not copy events bound in the matching element or its descendant elements. However, you can pass a Boolean parameter to this method. If you set this parameter to true, you can copy the event together, that is, .clone(true). In this way, you can avoid the trouble of manually rebinding events after each copy.

Create pull quotes through copy Many websites, like their print counterparts, use pull quotes to emphasize small chunks of text and draw the reader's eye. The so-called highlighted quotation is to extract a part of the text from the main text and then apply a special graphic style to this text. This decorative effect can be easily accomplished through the .clone() method. First, let’s take a look at the third paragraph of the example text:

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.

We noticed that this paragraph starts with WX element, and the classes in it are prepared for copying. When you paste the copied * text to another location, you also need to modify its style properties so that it can be distinguished from the original text.
To implement this style, Add a pulled class and add the following style rules for this class in the style sheet:

Copy code 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);
}

This adds a light gray background, some padding, and a different font to the pull-quote. More importantly, it is absolutely positioned 20px above and 20px to the right of the nearest ancestor element positioned (absolutely or relatively) in the DOM. If there are no elements in the ancestor element to which positioning applies (other than static), then the pull-quote will be positioned relative to the

element in the document. To do this, make sure in your jQuery code that the parent element of the copied pull-quote has the position:relative style applied.

Calculate CSS position

Although the top edge position of the pull-quote box is relatively intuitive, when it comes to its left side being 20 pixels to the right of its positioned parent element, it may not be so easy to understand. To get this number, you need to first calculate the total width of the pull-quote box, which is the value of the width attribute plus the left and right padding, or 145px 5px 10px. The result is 160px. When setting the right attribute for a pull-quote, a value of 0 will align the right side of the pull-quote with the right side of its parent element. Therefore, to make its left side 20px to the right of its parent element, it needs to be moved in the opposite direction by 20px more than its total width, which is -180px.

Now let’s go back to the jQuery code and see how to apply styles. First, start with a selector expression that matches all elements, and then apply the position:relative style to the selected elements, see the following code:

Copy code The code is as follows:

$(document).ready(function() {
$('span.pull-quote').each(function(index) { var $parentParagraph = $(this).parent('p'); $parentParagraph.css('position', 'relative');
});
});

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

The next step is to create the highlight quote itself to take advantage of the prepared CSS styles. At this time, we first copy each element, then add the pulled class to the obtained copy, and finally insert this copy into the beginning of its parent paragraph, see the following code:

Copy code The code is as follows:

$(document).ready(function() {
$('span.pull-quote').each(function(index) { var $parentParagraph = $(this).parent('p'); $parentParagraph.css('position', 'relative'); var $ clonedCopy = $(this).clone();
$clonedCopy
.addClass('pulled')
.prependTo($parentParagraph);
});
});

Here, we define a new variable $clonedCopy for later use.
Because absolute positioning has been set for the copied element, its position within the paragraph does not matter. According to the settings in the CSS rules, as long as it is inside the paragraph, it will be positioned relative to the top and right sides of the paragraph. Currently, paragraphs with highlighted quotes inserted within them look like this:

I hope this article will be helpful to everyone’s jQuery programming.