jQuery Traversing / DOM Insertion, Around

I had another day asking myself “What would have been my solution if there were no jQuery“. I met with two of my friend recently who were having a problem with alignment of an iframe. I kind of felt sorry for the theme to be honest since there were tones of CSS codes where each almost affected one-another, and the amount of plugins used on the site had taken the identity of the beautiful theme away. But lets get back to actual problem. Iframes did not want to center themselves when they were being added into articles.

We could have use CSS to solve that problem, but instead I decided to use wrap() method of jQuery Traversing and DOM Insertion, Around. The CSS solution wouldn’t be general and it would require unique fixes per division, but wrap() gave us possibility of using same solution globally.

DOM Insertion, Around

.wrap()

Manipulation > DOM Insertion, Around > .wrap() is an amazing jQuery code that gives us possibility to wrap any target class or id with another HTML element. Also see related wrappingElement (Selector, htmlString, Element..)

Using the code above, you will be able to get any an iframe located in .entry-content class to be wrapped with an additional class .foo and you’d end up centering iframe automatically if you had text-align:center rule for .foo class (you can change the name of course) in your CSS file. Anyone with another idea?

Is that all? Absolutely no. While we are at it, lets also talk about traversing a bit. Lets continue with unwrap().

.unwrap()

Unlike the wrap() this method is used to remove the parent wrapper of the targeted element. It has no argument nor any properties. Below is an example of using both wrap() an unwrap() together.

.wrapAll()

wrapAll is used to wrap an HTML structure (div, span…) around these elements (may be nested several levels deep, but should contain only one inmost element) in the set of matched elements and it can take any argument (wrappingElement, Selector, htmlString…). The structure will be wrapped around all of the elements in the set of matched elements, as a single group. wrapAll() wraps all elements, wrap() wraps each element, that is the difference between .wrap and .wrapAll methods.

.wrapInner()

wrapInner method is used to wrap specified HTML structure (div, span…) around the content (innerHTML) of each element in the set of matched elements and it can take any argument (wrappingElement, Selector, htmlString…)

P.S.: jQuery Traversing / DOM Insertion, Around #2 will be published in a few days.

Leave a Reply