All geek questions in one place

Wrapping nested <div> with adding identifiers around elements in jQuery

I am just learning jQuery and ran into a problem that puzzled me. I need to move, add and call divs without affecting the content.

I have one fixed-width WRAPPER cut with SECTION sections inside. It looks like this:

<body> <div id="whitewrap"> <div id="wrapper-1" class="wrapper"> <div class="clearfix"> <section id="block-1"> <h1>Title</h1> <p>Some wonderful content.</p> </section><!-- #block-1 --> <section id="block-2"> <h1>Title</h1> <p>Some wonderful content.</p> </section><!-- #block-2 --> <section id="block-3"> <h1>Title</h1> <p>Some wonderful content.</p> </section><!-- #block-3 --> </div><!-- .clearfix --> </div><!-- #wrapper-1 --> </div><!-- #whitewrap --> </body>

I need each SECTION to have its own WRAPPER div plus add a CONTAINER div around each wrapper. The identifier # for WRAPPERS and CONTAINERS should automatically increase because SECTIONS are dynamically added.

This is what I imagine.

 <body> <div id="whitewrap"> <div id="container-1"> <div id="wrapper-1" class="wrapper"> <div class="clearfix"> <section id="block-1"> <h1>Title</h1> <p>Some wonderful content.</p> </section><!-- #block-1 --> </div><!-- .clearfix --> </div><!-- #wrapper-1 --> </div><!--#container-1 --> <div id="container-2"> <div id="wrapper-2" class="wrapper"> <div class="clearfix"> <section id="block-2"> <h1>Title</h1> <p>Some wonderful content.</p> </section><!-- #block-2 --> </div><!-- .clearfix --> </div><!-- #wrapper-2 --> </div><!--#container-2 --> <div id="container-3"> <div id="wrapper-3" class="wrapper"> <div class="clearfix"> <section id="block-3"> <h1>Title</h1> <p>Some wonderful content.</p> </section><!-- #block-3 --> </div><!-- .clearfix --> </div><!-- #wrapper-3 --> </div><!--#container-3 --> </div><!-- #whitewrap --> </body>

Thanks guys!

+6
source share
3 answers

wrap / unwrap is what you are looking for here. In particular, overloading that provides you with an index parameter will be useful:

 $("#block-1").unwrap().unwrap(); $("section").wrap(function(i) { var num = i + 1; return "<div id='container-" + num + "'>" + "<div id='wrapper-" + num + "' class='wrapper'>" + "<div class='clearfix'></div></div></div>"; });

Example: http://jsfiddle.net/andrewwhitaker/NfuGz/1/

+1
source

Use the jQuery .wrap() function with an increment counter. Pass the .wrap() function, which will build an HTML fragment to surround each <section> , using a counter as needed in the identifiers and incrementing it:

 var counter = 1; $('section').wrap(function() { // Make a string of the HTML which should wrap around each <section> var wrapper = '<div id="container-' + counter + '"><div id="wrapper-' + counter + '" class="wrapper"></div></div>'; // Increment the counter counter++; // Return the string and it will be applied around each <section> return wrapper; });

Here's a demo ...

Note. You already have <div id="wrapper-1" /> surrounding it all. If this needs to be removed (which should be if you still have wrapper-1 around a <section> ), first use .unwrap() :

 $("div.clearfix").unwrap(); // Then run the rest of the code...

Like in this demo ...

+4
source

Take a look at wrap() and wrapAll() . To automatically increase the number, you can use index() on each() section .

In any case, I would think about rethinking the tag tree, I'm not sure if section wrapped in many div is the most semantically correct thing. Maybe article is better? Quoting from w3 :

A section element is a general section of a document or application. A section in this context is a topic group of contents, usually with a heading.

0
source

Source: https://habr.com/ru/post/921538/

More articles:


All Articles