Question 246085 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Get item count based on item's class name in jQuery

I wanted to shorten below code in dynamic way.
The code is using to load the number of tags having class name "region1, 2,3, 4" in each section .it loads to corresponding div in side p tag.
Experts please Help.

// Load region based event’s count in region tiles

$(document).ready(function(){
 
//load count on page load
//Default one on page load
var region1 = $('#tab1 .region1').length;
$(".Regions_latam p").text(region1 + " Events");
console.log(region1);

var region2 = $('#tab1 .region2').length;
$(".Regions_global p").text(region2 + " Events");

var region3 = $('#tab1 .region3').length;
$(".Regions_na p").text(region3 + " Events");

var region4 = $('#tab1 .region4').length;
$(".Regions_emea p").text(region4 + " Events");

var region5 = $('#tab1 .region5').length;
$(".Regions_atci p").text(region5 + " Events");

//Default one on page load ends
 
$(".tab1").click(function() {
 console.log("tab1 clicked");
var region1 = $('#tab1 .region1').length;
$(".Regions_latam p").text(region1 + " Events");

var region2 = $('#tab1 .region2').length;
$(".Regions_global p").text(region2 + " Events");

var region3 = $('#tab1 .region3').length;
$(".Regions_na p").text(region3 + " Events");

var region4 = $('#tab1 .region4').length;
$(".Regions_emea p").text(region4 + " Events");

var region5 = $('#tab1 .region5').length;
$(".Regions_atci p").text(region5 + " Events");

 
});

$(".tab2").click(function() {
 
 var region1 = $('#tab2 .region1').length;
$(".Regions_latam p").text(region1 + " Events");

var region2 = $('#tab2 .region2').length;
$(".Regions_global p").text(region2 + " Events");

var region3 = $('#tab2 .region3').length;
$(".Regions_na p").text(region3 + " Events");

var region4 = $('#tab2 .region4').length;
$(".Regions_emea p").text(region4 + " Events");

var region5 = $('#tab2 .region5').length;
$(".Regions_atci p").text(region5 + " Events");
 
});


$(".tab3").click(function() {
 
 var region1 = $('#tab3 .region1').length;
$(".Regions_latam p").text(region1 + " Events");

var region2 = $('#tab3 .region2').length;
$(".Regions_global p").text(region2 + " Events");

var region3 = $('#tab3 .region3').length;
$(".Regions_na p").text(region3 + " Events");

var region4 = $('#tab3 .region4').length;
$(".Regions_emea p").text(region4 + " Events");

var region5 = $('#tab3 .region5').length;
$(".Regions_atci p").text(region5 + " Events");
 
});

$(".tab4").click(function() {
 
 var region1 = $('#tab4 .region1').length;
$(".Regions_latam p").text(region1 + " Events");

var region2 = $('#tab4 .region2').length;
$(".Regions_global p").text(region2 + " Events");

var region3 = $('#tab4 .region3').length;
$(".Regions_na p").text(region3 + " Events");

var region4 = $('#tab4 .region4').length;
$(".Regions_emea p").text(region4 + " Events");

var region5 = $('#tab4 .region5').length;
$(".Regions_atci p").text(region5 + " Events");
 
});
});

// View Hide Region based Events

https://jsfiddle.net/anoopsuda/zr4eub7g/33/

Tags:

2

Answers


  1. 0

    Did this logic help?

    $(document).ready(function () {
  // Load count on page load
  $(".tabData").each(function () {
    updateRegionCount($(this));
  });

  // Click event for tabs
  $(".tab").click(function () {
    var tabId = $(this).data("tab");
    var $tabData = $("#" + tabId);
    updateRegionCount($tabData);
  });

  function updateRegionCount($tabData) {
    var regions = {};
    $tabData.find("div[class^='region']").each(function () {
      var regionClass = $(this).attr("class").split(" ")[0];
      regions[regionClass] = (regions[regionClass] || 0) + 1;
    });

    for (var regionClass in regions) {
      $("." + regionClass + " p").text(regions[regionClass] + " Events");
    }
  }
});

    May be you can follow the the above logic that may help you dynamically to get your expected output..

    Login or Signup to reply.
  2. 0

    You can add like this: logic is create a function with pass either controlname or classname with text to set as parameter.

    function setTextToPTab(ControlName, className, textToSet){
  if(ControlName != undefined && ControlName != null)
    $("#" + ControlName + " p").text(textToSet);
  if(className != undefined && className != null)
    $("."+ className +" p").text(textToSet);

}

// Load region based event's count in region tiles

$(document).ready(function(){
 
//load count on page load
//Default one on page load
var region1 = $('#tab1 .region1').length;
setTextToPTab( null, 'Regions_latam', (region1.toString() + " Events")) ; //$(".Regions_latam p").text(region1 + " Events");

})

    https://jsfiddle.net/a95zsurg/

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search