0

为了在将文档添加到站点时节省大量编辑数字的工作，我决定使用 javascript 来计算类中元素的数量doc。

我主要有两个问题：

  • 显示变量时出现问题。我最初认为这是因为我没有添加function，但是当我尝试添加它时，变量仍然没有显示。

  • 我想计算的类的元素在另一个页面上，我不知道如何链接到它。为此，我尝试过var x = $('URL: /*pageURL*/ .doc').length;但没有奏效。

本质上，我希望具有所述类名的总元素并将其显示在 span 元素中。

目前我有一些类似于下面显示的内容：

 <script>
 var Items = $('.doc').length;
 document.getElementById("display").innerHTML=Items;
 </script>
 <span id="display"></span>

在此处找到了一个类似的示例，其中显示了文章的总数。

编辑：

@ian 此代码将添加到主页 domain.net/home.html。我想链接到包含此文档的页面 domain.net/documents.html。我以前在某个地方看到过这种情况，如果我没记错的话，他们url:domainname.com/count在代码中的某个地方使用过。希望这可以帮助。

4

2 回答 2

2

这是一个 jQuery 调用，用于检索 url“./”（此页面）并解析所有具有类“lsep”“$('.lsep', data)”的元素的结果数据。如果您从浏览器的调试控制台中运行它，您应该会返回一个大于 5 左右的数字。

$.get("./", function(data, textStatus, jqXHR)
{
    console.log("Instances of class: " + $('.lsep', data).length)
});

要记住的一件重要事情是，如果您尝试调用的 URL 不在同一来源，您将遇到问题。

这是一个更新的代码片段，用于执行您所描述的操作：

$(document).ready(
    function ()
    {
      //var url = "/document.html" //this is what you'd have for url
      //var container = $("#display"); //this is what you'd have for container
      //var className = '.data'; //this is what you'd have for className

        var url = "./"; //the document you want to parse
        var container = $("#question-header"); //the container to update
        var className = '.lsep'; //the class to search for

        $.get(url, function (data, textStatus, jqXHR) {
            $(container).html($(className, data).length);
        });
    }
);

如果您从浏览器的调试控制台运行上述代码，它将用使用类名“.lsep”的实例数替换“在另一个页面上计数并显示它们”的问题标题文本。

于 2013-04-19T19:32:53.553 回答
1

首先，您必须等到document准备好后再操作DOM元素，除非您的代码放在您操作的元素的定义之后，而您的示例中并非如此。您可以将 a 传递function给，$它只会在文档准备好时运行它。

$(function () {
    //html() allows to set the innerHTML property of an element
    $('#display').html($('.doc').length);
});

现在，如果你的元素属于另一个document，那显然是行不通的。但是，如果您曾经window.open打开另一个窗口，其中包含包含.doc元素的文档，您可以将上述脚本放在该页面中，并依赖于在父窗口window.opener中引用。span

$('#display', opener.document.body).html($('.doc').length);

另一种选择是使用ajax访问其他页面的内容。在这里，data将包含your_other_page.html文档的 HTML，然后您可以使用 jQuery 像 DOM 结构一样对其进行操作。

$.get('your_other_page.html', function(data) {
    $('#display').html($('.doc', data).length);
});
于 2013-04-19T19:38:15.313 回答