Javascript 在页面上使用JQuery查看各种页面并获取.size（）

我需要你们的帮助

我想知道如何从加载的页面以外的页面检索变量的最佳实践

例如，假设这是一个博客网站

span标记用于具有一类标签，并具有内部文本，如“Adventure”或“Culture”

对于这一点，我完全是新手，我仍然在修补Jquery来计算这些数据

$.ajax({
url: 'json/blogs.json',
dataType: 'json',
type: 'get',
cache: false,
success: function(data){
  var count = 0;,
  $(data.blogs).each(function(index, value){
    if("category" == "Adventure"){
      count++;
    )
}
})

这段代码是不正确的，在每个函数内部，我相信有更好的方法。只是想研究一下所有可能对我有帮助的方法/循环

---

我为我必须克服的陡峭的学习曲线道歉。我非常感谢你和其他成员帮助我找到最佳解决办法

简单的开始方法是在每个表示类别的帖子中添加一个类

<section class="blog-post Culture">

现在，它是一个通过所有

cat total

跨度的简单循环

$('.cat-total').text(function(){
  var cat = $(this).data('cat');
  return $('.' +cat).length)// get the number of sections with this category class
})

在页面上使用JQuery查看各种页面并获取.size（）

.size

从v.1.8开始就被弃用，并从v.3.0中完全删除。请改用

.length

属性

我需要计算每个类别的出现次数，这些类别将是带有标签类的范围的内部文本

这是非常混乱的，你的HTML太难理解了。我冒昧地重写了HTML，希望其他读者也能很容易地理解。如果你想切入正题，这里有一个由2个HTML文件和一个外部CSS文件组成的工作演示

index.html 步骤1-找到每个

并计算

步骤2-显示每个


步骤3-单击指向
page2.html
的链接时，收集每个
并将其内容存储在一个数组中


步骤4-串接阵列并将其存储在
localStorage






页面2.html
步骤5-获取字符串化数组并将其解析回数组


步骤6-收集
并在它们之间迭代（循环）。在每次迭代中，分配数组的数据，对应于每个
的索引位置

var F=document.forms[0]；
var total=F.元素长度；
for（设i=0；i

看看本地存储。它很容易使用+1为简单起见。我完全忘记了本地存储。多谢。让我做一个快速复习，看看我是否能解决这个问题。如果我的所有部分都在index.html上，而跨距都在不同的html文件上，这会起作用吗？不会……但是你可以使用ajax获取索引，并在ajax成功回调中进行计数。您不是使用服务器端语言来呈现所有帖子，还是使用数据库来存储所有帖子？如何存储数据将是一个重要的问题，因为从那里获取所需信息可能很简单。老实说，这只是我在修修补补。我是一个自学成才的网络开发者。这是一个很新的话题。我打算把它们全部保存在HTML中，因为现在没有。哈哈，有什么推荐的资源可以教我怎么做吗？当我度假回家后，我会重新打开HTML书籍，看看它是否涵盖AJAX和使用数据库。谢谢你的洞察力。我100%自学成才。如果不想使用服务器端动态语言，可以将数据存储在firebase之类的云存储中，并使用ajax和模板引擎呈现页面中的所有数据。计数将是类似的，要求数据和计数的分类我一定会调查这一点。非常感谢你！澄清：包含博客类别的span可在index.html中找到：Culture此span的类别为“Culture”。在page2.html上，侧栏包含以下内容：
1
我希望找到一种方法，根据index.html中具有“Culture”类别的博客数量，动态地找到这个span的innerHTML“1”。在您的布局中……什么元素代表博客。“我的布局”表示包含元素
的博客。每个类别都由一个
表示，您看到这些数字了吗？计算index.html上每个类别的文章数是否准确？通过硬代码添加文章（编辑）…它是否仍在计算
s？看看page2.html，数字相同吗？我选择的元素在语义上是合理的，并且比包含多个类的div或span更具描述性。如果出于某种原因，你的博客没有韵律或理由（这就是标签的作用），那么每一个…都不是问题，我付出了额外的努力，因为我看到你也是。我给了你一些额外的想法，并想给你一个我所做的更新。我用的是我买的模板，因为我觉得它看起来不错。问题是它在语义上不正确。开发人员缺少在浏览器中呈现页面时所具有的许多功能。我的问题是为了让这个模板工作。把你的建议放在心上之后，我意识到我已经损害了编程的基础。我想，作为一个相对noob的开发者，很难找到一个。。。（续）这个问题的解决方案是因为尽管有web开发的基本教义，我还是选择了一条简单的道路。从长远来看，即使我完成了这项工作，我也很难在今后管理它。因为这个启示，我放弃了这个模板。我还发现了isotype.js，它提供了我所寻求的或更喜欢的过滤和显示灵活性
$.getJSON('blog.json', function(data) {
var output = '<ul>';
$.each(data, function(key, val) {
    output += '<li>' + val.blogtitle + '</li>';
});
output +='</ul>';
$('#update').append(output);
});

<span class="label label-light label-danger">Adventure</span>

<li>
    <!-- Here the innerHTML is "Adventure" -->
    <a class="label label-light label-primary" href="filter-category.html">Adventure</a> 
    <!-- Span below contains a hard coded "1" for innerHTML. I need the count of index.html's spans that have a class of label containing innerHTML of "Adventure" to increase the count by 1 to be placed as the innerHTML of this span on page2.html. -->
    <span class="label label-light label-default pull-right">1</span>
</li>

{"blogs": [
          {
          "image":"img/blog1image.jpg",
          "category":"Adventure",
          "date":"January 1, 2011",
          "title": "First Blog's Title",
          "preview":"This is an intro for the first blog. Short and concise."
          },
          {
          "image":"img/blog2image.jpg",
          "category":"Culture",
          "date":"February 2, 2012",
          "title": "Second Blog's Title",
          "preview":"This is an intro for the second blog. Short and concise."
          },
          {
          "image":"img/blog3image.jpg",
          "category":"Culture",
          "date":"March 3, 2013",
          "title": "This is the third blog's title",
          "preview":"This is an intro for the third blog. Short and concise."
          }
]}

$.ajax({
url: 'json/blogs.json',
dataType: 'json',
type: 'get',
cache: false,
success: function(data){
  var count = 0;,
  $(data.blogs).each(function(index, value){
    if("category" == "Adventure"){
      count++;
    )
}
})

<section class="blog-post Culture">

<span data-cat="Culture" class="cat-total label ...">1</span>

$('.cat-total').text(function(){
  var cat = $(this).data('cat');
  return $('.' +cat).length)// get the number of sections with this category class
})

  $('.sec').each(function() {
   var articles = $(this).find('article');
   var total = articles.length;
   ...

  $(this).find('.qty').text(total);

  $('a').on('click', function() {
    var data = [];
    $('.qty').each(function() {
      var txt = $(this).text();
      data.push(txt);
    });
  ...

localStorage.setItem("data", JSON.stringify(data));

var dataTxt = JSON.parse(localStorage.getItem("data"));

var F = document.forms[0];
var total = F.elements.length;
for (let i = 0; i < total; i++) {
  F.elements[i].value = dataTxt[i];
}