0

这是我<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>
4

3 回答 3

2

这应该适合你：

工作示例

HTML：

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

JS： 

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

或者换一种说法：

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

.html() 的 API 文档

于 2013-09-06T00:38:18.370 回答
1

它看起来像这样谦虚：

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>
于 2013-09-06T03:02:57.340 回答
1 
var carspecs = $('#carspecs').html();
于 2013-09-05T22:08:23.597 回答