Using JQuery on a page to look at various page and get .size()

Question

I need your help folks!

I would like to know the best practice of how to retrieve a variable from a page other than the one that's loaded.

For example, let us assume this is a blog website.

A span tag is used to have a class of label and has inner text such as "Adventure" or "Culture".

   <span class="label label-success">Adventure</span>
   <span class="label label-info">Culture</span>

These will be used for various blogs previews on the "index.html" page. On "page2.html" there is a sidebar that shows the categories "Adventure" and "Culture" among some others.

Each label used in the sidebar will also use Bootstrap badge class to show the count of blogs containing that span with each category text.

I'm new to Jquery, but I know that using global variables is bad. I've read other people using the window object to create variables while keeping global scope clean. This is over my head and none of the examples I've read make it seem like it is being used over several pages.

I need to count the number of occurrences of each category that will be inner text of a span with label class.

This number will come from the index page.

Here's two examples of the blog previews that will contain the category in a span:

<section class="blog-post">
<div class="panel panel-default">
<img src="img/this_is_an_image.jpg" class="img-responsive" />
<div class="panel-body">
  <div class="blog-post-meta">
    <span class="label label-light label-danger">Adventure</span>
    <p class="blog-post-date pull-right">February 16, 2016</p>
  </div>
  <div class="blog-post-content">
    <a href="post-image.html">
      <h2 class="blog-post-title">Blog 1</h2>
    </a>
    <p>Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut gravida lorem.</p>
    <a class="btn btn-info" href="post-image.html">Read more</a>
    <a class="blog-post-share pull-right" href="#">
      <i class="material-icons">&#xE80D;</i>
    </a>
  </div>
</div>
</div>
</section>

<section class="blog-post">
<div class="panel panel-default">
<img src="img/this_is_an_image_2.jpg" class="img-responsive" />
<div class="panel-body">
  <div class="blog-post-meta">
    <span class="label label-light label-success">Culture</span>
    <p class="blog-post-date pull-right">February 16, 2016</p>
  </div>
  <div class="blog-post-content">
    <a href="post-image.html">
      <h2 class="blog-post-title">Blog 2</h2>
    </a>
    <p>Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut gravida lorem.</p>
    <a class="btn btn-info" href="post-image.html">Read more</a>
    <a class="blog-post-share pull-right" href="#">
      <i class="material-icons">&#xE80D;</i>
    </a>
  </div>
  </div>
  </div>
  </section>

It will be used in the spans of this sidebar on page2.html:

   <div class="sidebar-module">
<div class="panel panel-default">
  <div class="panel-body">
    <h4>Category</h4>
    <ol class="categories list-unstyled">
      <li>
        <a class="label label-light label-primary" href="filter-category.html">Adventure</a>
        <span class="label label-light label-default pull-right">1</span>
      </li>
      <li>
        <a class="label label-light label-warning" href="filter-category.html">Food</a>
        <span class="label label-light label-default pull-right">0</span>
      </li>
      <li>
        <a class="label label-light label-info" href="filter-category.html">Culture</a>
        <span class="label label-light label-default pull-right">1</span>
      </li>
      <li>
        <a class="label label-light label-danger" href="filter-category.html">Nature</a>
        <span class="label label-light label-default pull-right">0</span>
      </li>
      <li>
        <a class="label label-light label-success" href="filter-category.html">Beach</a>
        <span class="label label-light label-default pull-right">0</span>
      </li>
      <li>
        <a class="label label-light label-inverse" href="filter-category.html">Sites</a>
        <span class="label label-light label-default pull-right">0</span>
      </li>
    </ol>
  </div>
</div>

I'm sure it is something easy, but I'm learning so any instruction in layman's terms would be great! Thanks in advance for your time, consideration, and willingness to teach.

@charlietfl, I've done a bit more research and have another question for you. I may put the blog articles into JSON format and use $.getJSON() to format it. Maybe something similar to this:

$.getJSON('blog.json', function(data) {
var output = '<ul>';
$.each(data, function(key, val) {
    output += '<li>' + val.blogtitle + '</li>';
});
output +='</ul>';
$('#update').append(output);
});

Is this what you meant? So now that I'm loading a JSON file that will hold all of the blog info it can be read into the index.html and retrieved on the second page where I need to count the entries, right? I know this code isn't correct yet. Am I heading in the right direction?

---

@ zer00ne - I apologize, but maybe I'm too noobish to understand what you're recommending for me. I do appreciate your help though. Thanks for the patience.

This code is from a modified template:

A section represents a blog post. A blog post has a few pieces of info. There is a category specifying what the subject of the blog is about and I was hoping to use to count the number of blogs aka sections containing it.

The category is found on this line for this one blog:

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

This blog has a category of "Adventure". It is likely the only line worth looking at for this purpose.

On page2.html my sidebar has a li like this:

<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>

I'm fully aware that you are much more, far more experienced than I am. I consider this to be my lack of knowledge. With the broken up code I am confused as to what goes where. I suppose you want me to change the tags of my code to more accurate descriptions. In doing so, the scripts will then work?

I am currently looking into using JSON data instead of facing this mess. I think it may be far easier.

So far my example JSON file will look like this:

{"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."
          }
]}

Being absolutely new to this I'm still tinkering with Jquery to count this data.

$.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++;
    )
}
})

This code is not correct, inside the each function, and I am sure there is a better way. Just trying to research all the methods/loops that might help me.

I apologize for the steep learning curve that I have to overcome. I am extremely grateful to have you and other members assisting me in finding the best solution.

Answer 1

Simple start approach would be add a class to each post <section> that represents the category

<section class="blog-post Culture">

Then put a similar data attribute on the total display spans along with a common class like cat-total

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

Now it is a simple loop through all the cat-total spans

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

Answer 2

Using JQuery on a page to look at various page and get .size()

.size is deprecated since v.1.8 and removed entirely from v.3.0. Use the .length property instead.

I need to count the number of occurrences of each category that will be inner text of a span with label class.

This is very confusing and your HTML was too hard to follow. I took the liberty of rewriting the HTML so hopefully it'll be easy for other readers to follow. If you want to cut to the chase, here's the working demo comprising of 2 HTML files and an external CSS file.

PLUNKER

index.html

Step 1 - Find each <section> and count the number of <article>s each <section> has.

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

.each().find()

Step 2 - Display the data for each <section>

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

.text()

Step 3 - When the link to page2.html is clicked, gather each <output class='qty'> and store their content in an array.

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

.on().push()

Step 4 - Stringify the array and store it in localStorage

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

localStorage.setItem()JSON.stringify()

---

Difference Between JSON.stringify() and JSON.parse()

Store an Array in localStorage

---

page2.html

Step 5 - Get the stringified array and parse it back into an array.

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

localStorage.getItem()JSON.parse()

Step 6 - Collect <output class='qty'> and iterate (loop) through them. In each iteration, assign the array's data, corresponding to each <output>'s indexed position.

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

Forms Collection