CODEWITHSUNDEEP
javascriptjqueryhtml
Liondancer
Liondancer

Reputation: 16469

Reusing <div> with jQuery

This is my <div> with id = CarSpecs. I want to reuse this piece of code with jQuery's selectors. What I want to achieve is using something such as $("CarSpecs") so I won't have a huge HTML file.

Could someone show me how to do this please?

    <div id="CarSpecs">
                <div data-role="collapsible" data-theme="a" data-content-theme="a" data-collapsed-icon="arrow-d" data-expanded-icon="arrow-u">
                    <h1>Price</h1>
                </div>
                <div data-role="collapsible" data-theme="a" data-content-theme="a" data-collapsed-icon="arrow-d" data-expanded-icon="arrow-u">
                    <h1>Body</h1>
                </div>
                <div data-role="collapsible" data-theme="a" data-content-theme="a" data-collapsed-icon="arrow-d" data-expanded-icon="arrow-u">
                    <h1>Transmission</h1>
                </div>
                <div data-role="collapsible" data-theme="a" data-content-theme="a" data-collapsed-icon="arrow-d" data-expanded-icon="arrow-u">
                    <h1>Engine</h1>
                </div>
                <div data-role="collapsible" data-theme="a" data-content-theme="a" data-collapsed-icon="arrow-d" data-expanded-icon="arrow-u">
                    <h1>Fuel</h1>
                </div>
    </div>

Upvotes: 0

Views: 1536

Answers (3)

AdamStallard
AdamStallard

Reputation: 1830

It would look like this in modest:

main.xhtml

<?xml version='1.0' encoding='UTF-8'?>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <include>CarSpecs</include>
  </head>
  <body>
    <CarSpecs/>
  </body>
</html>

CarSpecs.xml

<div id="CarSpecs">
        <div data-role="collapsible" data-theme="a" data-content-theme="a" data-collapsed-icon="arrow-d" data-expanded-icon="arrow-u">
            <h1>Price</h1>
        </div>
        <div data-role="collapsible" data-theme="a" data-content-theme="a" data-collapsed-icon="arrow-d" data-expanded-icon="arrow-u">
            <h1>Body</h1>
        </div>
        <div data-role="collapsible" data-theme="a" data-content-theme="a" data-collapsed-icon="arrow-d" data-expanded-icon="arrow-u">
            <h1>Transmission</h1>
        </div>
        <div data-role="collapsible" data-theme="a" data-content-theme="a" data-collapsed-icon="arrow-d" data-expanded-icon="arrow-u">
            <h1>Engine</h1>
        </div>
        <div data-role="collapsible" data-theme="a" data-content-theme="a" data-collapsed-icon="arrow-d" data-expanded-icon="arrow-u">
            <h1>Fuel</h1>
        </div>
</div>

Or if you want to reuse even more, do this:

main.xhtml

<?xml version='1.0' encoding='UTF-8'?>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <include>CarSpecs</include>
    <include>CarSpec</include>
  </head>
  <body>
    <CarSpecs/>
  </body>
</html>

CarSpec.xml

<div data-role="collapsible" data-theme="a" data-content-theme="a" data-collapsed-icon="arrow-d" data-expanded-icon="arrow-u">
    <h1 uses="spec"/>
</div>

CarSpecs.xml

<div>
    <CarSpec spec="Price"/>
    <CarSpec spec="Body"/>
    <CarSpec spec="Transmission"/>
    <CarSpec spec="Engine/>
    <CarSpec spec="Fuel/>
</div>

Upvotes: 1

apaul
apaul

Reputation: 16170

This should work for you:

Working Example

HTML:

<div class="copy"></div>

JS: 

var carspecs = $('#CarSpecs').html();
$('.copy').html(carspecs);

or put another way:

$('.copy').html($('#CarSpecs').html());

API documentation for .html()

Upvotes: 2

andrew
andrew

Reputation: 9583

var carspecs = $('#carspecs').html();

Upvotes: 1

Related Questions