Question

这是<div>，ID = CarSpecs。我想用jQuery的选择器重用这段代码。我想要实现的是使用诸如$("CarSpecs")之类的东西，所以我不会有一个庞大的HTML文件。

有人可以告诉我该怎么做吗？

    <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>

Answer 1

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

Answer 2

这应该适合你：

<强> Working Example

HTML：

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

JS：

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

或换句话说：

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

API documentation for .html()

Answer 3

在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>

或者如果您想再重复使用，请执行以下操作：

<强> 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>

将<div>与jQuery重用</div>

3 个答案: