Question

我建立了一个没有任何服务器端脚本/语言的网站，只使用HTML / JavaScript / jQuery。

在我的网站上，我保留了一个简单的stream.html页面（没有css，格式化等）。

<html>
<head>
</head>
<body>
<div id="textParagraphs">
<p>Para 1</p>
<p>Para 2</p>
<p>Para 3</p>
<p>Para 4</p>
</div>
</body>
</html>

在我拥有的所有其他html页面中（使用div / formatting / css等），我打算在标题中保留一个部分，从页面中选取前三个部分，然后显示它们通过旋转效果。例如：After有三段，它应显示Para1 - ＆gt;淡出 - ＆gt; Para2 - ＆gt;淡出 - ＆gt; para3各个

如何从其他页面中提取部分并在此处显示？

Answer 1

我建议将这些段落存储为JSON。

然后，您可以使用jquery $.getJSON()从每个页面请求它们，而不必解析HTML文档。如果你想维护stream.html文件，你可以获取JSON并打印所有这些，而不是只处理前三个。

点击此处的示例：http://api.jquery.com/jQuery.getJSON/

获得（3）项目列表后，您可以设置轮播（google for carousel javascript）。有很多脚本或jQuery插件可以做到这一点，找到你喜欢的！

Answer 2

基本上，您可以使用jQuery.get()函数获取该html页面的内容。然后，在结果中，您应使用搜索jQuery(result).find("p")代码。既然您拥有p标记的数组，则可以使用这个简单的carousel脚本进行旋转：

var carousel = {
    _defaultParameters: {
        container: null,
        paragraphs: [],
        timeout: 3000,
        nextItemIndex: 0
    },

    rotate: function(param){
        var param = $.extend(true, {}, this._defaultParameters, param);

        if(param.paragraphs.length == 0) return;
        if(param.nextItemIndex > param.paragraphs.length - 1){
            param.nextItemIndex = 0;
        }

        param.container.empty().append(param.paragraphs[param.nextItemIndex]);

        param.nextItemIndex++;
        setTimeout(function(){ carousel.rotate(param); }, param.timeout);
     }
}

$(function(){

    jQuery.get('data_source.html', function(result) { // replace data_source.html with your external html file url
        var paragraphs = jQuery(result).find("p");

        carousel.rotate({
            container: $("#rotatorContainerID"), //replace this with your container
            paragraphs: paragraphs
        });
    });

});

将'data_source.html'替换为包含标记的外部html文件的地址。同时将container: $("#rotatorContainerID")更改为将托管id标记的元素的，并在其中显示轮播。

要演示carousel功能，您可以查看此小提琴：http://jsfiddle.net/5AgcE/4/

Answer 3

这是最简单的方法：

var allPs = $('p');

var p1 = $(allPs[0]).html();

var p2 = $(allPs[1]).html();

var p3 = $(allPs[2]).html();

您还可以添加一些测试：

if(allPs.length >= 3) {

}

如何从外部html页面中提取<p>标签并在它们之间轮换</p>

3 个答案: