复制HTML，CSS中的设计模式？

Question

Suppose you have this following code in HTML -
<div id="pattern">
<span class="a">Content</span>
</div>
And suppose you wanted to replicate and show this pattern at different positions on the page. How would you do it?
Each of these pattern's will have a specific styling though.

Answer 1

It is very easy to do using jQuery.

$('#pattern')
    .clone()
    .addClass('variate-styling')
    .appendTo('#container');

This piece of code will replicate pattern block, add some new styling effect and put it into another position on your page.

Answer 2

really vague, but lets see.

Content

this repeats. so add a class of patterns to div, i'll leave that id there for you, but we're not using it @ the moment.

Content

so the repeating sections are set. set default/generic styling for all here: .patterns{} .patterns a{}

you want different positions? ok, say you have one in your #column, #main-content and #footer id's. you can style these 2 easy ways: 1) use parent in cascade to target specific repeating section:

Content Content Content

so to specify individual styles here, after default styles: .patterns{background-color:#c0c0c0} .patterns a{}

/* declare unique styles */

column .patterns{background-color:#000}

main-content .patterns{background-image:url("deez.png") 0 0 no-repeat}

footer .patterns{background-color:#yourM0m}

OR you could ditch the ids and give each .pattern its own id, but the most versatile, optimized answer is to ditch the ids and use classes only, so each .patterns that needed an alternate style would also have to have said class added to it.

if i understood your question correctly, this is an extremely more optimized method than relying on a programming language (aside from JavaScript) to do it for you. And while JavaScript is the optimal language to use with the Browser, aka Front-End....you do not need it to achieve what you are seeking. hope this helps.

cheers! werd

Answer 3

You can use a loop. If your language is PHP:

<?php
$patters=array('pattern1', 'pattern2', 'pattern3', 'pattern4', 'pattern5');
for($i=0;$i<5;$i++){
    echo '<div id="'.$patters[$i].'"><span class="a">Hackalicious</span></div>';
}
?>

Regards!