Question

为了节省我在向网站添加文档时编辑数字的大量工作，我决定使用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>

找到类似here的示例，其中显示了文章的总数。

修改：

@ian 此代码将添加到主页domain.net/home.html。我想链接到包含此文档的域名domain.net/documents.html。我之前已经看到过这个问题，如果我没记错的话，他们会在代码中的某处使用url:domainname.com/count。希望这会有所帮助。

Answer 1

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

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

要记住的一件重要事情是，如果您尝试拨打的网址不在same origin中，则会遇到问题。

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

$(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的实例数” “被使用了。

Answer 2

首先，你需要等到document准备就绪才能操作DOM元素，除非你的代码放在之后你操作的元素的定义，这是不是你的例子中的情况。您可以将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);
});

在另一个页面上计数并显示它们

2 个答案: