jQuery arrays and retrieve data and key

Question

Hi all. I am new to jQuery and just wrote this small piece (with PHP knowledge) and was wondering a) would it work b) how would i return a value acording to its key value?

    var boxHeightArray = [];
    var boxNameArray = [];
    $("div[class=dropDiv]").each(function(i){   
        var height = $(this).height(true);
    var name = $(this).attr("name");
    boxHeightArray[i] = height;
    boxNameArray[i] = name;
   });

regards

Answer 1

how would i return a value acording to its key value?

What do you mean by this ?

You can use an associative array if you want instead of two arrays, so that would mean something like

$("div[class=dropDiv]").each(function(i){   
  var height = $(this).height(true);
  var name = $(this).attr("name");
   hash[name]  = height;
  ihash[height]= name  ;
 });

So now you can return a name by knowing the height, and you can return a height by knowing the name. (given that there are no duplicate names/heights).

Answer 2

Use an array of objects:

    var boxInfo = [];//an array to store 'info' objects
    $("div[class=dropDiv]").each(function(i){   
        var height = $(this).height(true);
        var name = $(this).attr("name");
        var obj = { boxHeight: height, boxName: name };
        boxInfo.push(obj);
    });

Now each offset to boxInfo contains an object, you can traverse them like this:

$.each(boxInfo,function(i,n) {
    alert("Height of box at offset " + i + " is: " + n.boxHeight + " and name is: " + n.boxName);
});

Answer 3

Oay, i've put it all together but im getting error that the boxNameArray and boxHeightArray are not defined, anyone know why?

    function dropBox() {
 function anchorReplace()
 {
  $("a[class=open]").each(function(i){
   var anchorElement = $(this);
   var newAnchorElement = $('<a href="#link' + i + '" class="' + anchorElement.attr('class') + '" name="#link' + i + '">' + anchorElement.text() + '</a>').insertBefore(anchorElement);
    anchorElement.remove();
  });
  $("a[class=close]").each(function(i){
   var anchorElement = $(this);
   var newAnchorElement = $('<a href="#link2' + i + '" class="' + anchorElement.attr('class') + '" name="#link2' + i + '">' + anchorElement.text() + '</a>').insertBefore(anchorElement);
    anchorElement.remove();
  });
 }
 function giveDivName() //simply add name attribute to div element
 {
  $("div[class=dropDiv]").each(function(i){ //foreach div with class dropDiv
   var divElement = $(this);
   var newDivElement = $('<div class="dropDiv" name="div' + i + '">' + divElement.html() + '</div>').insertBefore(divElement);
    divElement.remove();
  }); 
 }
 function getOrigValues() //get the values before closing div 
 {
  var boxHeightArray = []; //get original div height
  var boxNameArray = []; //get div name
  $("div[class=dropDiv]").each(function(i){ 
   var height = $(this).height(true);
   var name = $(this).attr("name");
   boxHeightArray[i] = height;
   boxNameArray[i] = name;
  }); 
  $("div[class=dropDiv]").css("height", "27px"); //close all dropDiv's
 }

 anchorReplace();
 giveDivName();
 getOrigValues();

 $("#reportWrapper div").css("overflow", "hidden");
 $("a[class=close]").bind("click", function(){
  $(this).parents("div:eq(0)").animate({
   height: '30px'
  }, 1000);      
 });
 $("a[class=open]").bind("click", function(){
  var clicked = $(this);
  $("a[class=open]").each(function(){ 
   if( clicked.attr("name") !== $(this).attr("name") )
   {
    $(this).parents("div:eq(0)").animate({
     height: '30px'
    }, 1000);
   }
   else
   {
    var element = $(this);
    function getNewHeight(element) // get the height for when clicked to open
    {
     var divName = element.parents("div:eq(0)").attr("name");
     $.map( boxNameArray, function(i, val){
      if( element.attr("name") == divName )
      {
       var key = i;
       $.map(boxHeightArray, function(i, val)
       {
        if( key == i )
        {
         return newHeight = val; 
        }
       });
      }
     }); 
    }
    getNewHeight(element);
    clicked.parents("div:eq(0)").animate({
     height: newHeight + 'px'
    }, 1000);
   }
  });
 });
}

Answer 4

getting error "boxInfo undifind"

function dropBox() {
 function anchorReplace()
 {
  $("a[class=open]").each(function(i){
   var anchorElement = $(this);
   var newAnchorElement = $('<a href="#link' + i + '" class="' + anchorElement.attr('class') + '" name="#link' + i + '">' + anchorElement.text() + '</a>').insertBefore(anchorElement);
    anchorElement.remove();
  });
  $("a[class=close]").each(function(i){
   var anchorElement = $(this);
   var newAnchorElement = $('<a href="#link2' + i + '" class="' + anchorElement.attr('class') + '" name="#link2' + i + '">' + anchorElement.text() + '</a>').insertBefore(anchorElement);
    anchorElement.remove();
  });
 }
 function giveDivName() //simply add name attribute to div element
 {
  $("div[class=dropDiv]").each(function(i){ //foreach div with class dropDiv
   var divElement = $(this);
   var newDivElement = $('<div class="dropDiv" name="div' + i + '">' + divElement.html() + '</div>').insertBefore(divElement);
    divElement.remove();
  }); 
 }
 function getOrigValues() //get the values before closing div 
 {
  var boxInfo = []; //get original div height
  $("div[class=dropDiv]").each(function(i){ 
   var height = $(this).height(true);
   var name = $(this).attr("name");
   var obj = { boxHeight: height, boxName: name };
   boxInfo.push(obj);
  }); 
  $("div[class=dropDiv]").css("height", "27px"); //close all dropDiv's
 }

 anchorReplace();
 giveDivName();
 getOrigValues();

 $("#reportWrapper div").css("overflow", "hidden");
 $("a[class=close]").bind("click", function(){
  $(this).parents("div:eq(0)").animate({
   height: '30px'
  }, 1000);      
 });
 $("a[class=open]").bind("click", function(){
  var clicked = $(this);
  $("a[class=open]").each(function(){ 
   if( clicked.attr("name") !== $(this).attr("name") )
   {
    $(this).parents("div:eq(0)").animate({
     height: '30px'
    }, 1000);
   }
   else
   {
    var element = $(this);
    function getNewHeight(element) // get the height for when clicked to open
    {
     var divName = element.parents("div:eq(0)").attr("name");
     $.each(boxInfo,function(i,n) {
      if( n.boxName == divName )
      {
       var newHeight = n.boxHeight;
      }
     });

    }
    getNewHeight(element);
    clicked.parents("div:eq(0)").animate({
     height: newHeight + 'px'
    }, 1000);
   }
  });
 });
}

anyone shed some light on why?

Answer 5

i am getting error: object is undefined:

    // JavaScript Document
// Created by ACT WEb Designs
// http://www.actwebdesigns.co.uk
//
//<div id="reportWrapper">
// <div class="dropDiv">
//  <p><a class="open">open me</a></p>
//  <p> blablabla blablabla</p>
//  <p><a class="close">close me</a></p>
// </div>
// <div class="dropDiv">
//  <p><a class="open">open me</a></p>
//  <p> blablabla blablabla</p>
//  <p><a class="close">close me</a></p>
// </div>
//</div>

 function dropBox() {
  function anchorReplace()
  {
   $("a[class=open]").each(function(i){
    var anchorElement = $(this);
    var newAnchorElement = $('<a href="#link' + i + '" class="' + anchorElement.attr('class') + '" name="#link' + i + '">' + anchorElement.text() + '</a>').insertBefore(anchorElement);
     anchorElement.remove();
   });
   $("a[class=close]").each(function(i){
    var anchorElement = $(this);
    var newAnchorElement = $('<a href="#link2' + i + '" class="' + anchorElement.attr('class') + '" name="#link2' + i + '">' + anchorElement.text() + '</a>').insertBefore(anchorElement);
     anchorElement.remove();
   });
  }
  function giveDivName() //simply add name attribute to div element
  {
   $("div[class=dropDiv]").each(function(i){ //foreach div with class dropDiv
    var divElement = $(this);
    var newDivElement = $('<div class="dropDiv" name="div' + i + '">' + divElement.html() + '</div>').insertBefore(divElement);
     divElement.remove();
   }); 
  }
  function getOrigValues() //get the values before closing div 
  {
   var boxInfo = []; //get original div height
   $("div[class=dropDiv]").each(function(i){ 
    var height = $(this).height(true);
    var name = $(this).attr("name");
    var obj = { boxHeight: height, boxName: name };
    return  boxInfo.push(obj);
   }); 
   $("div[class=dropDiv]").css("height", "27px"); //close all dropDiv's
  }

  anchorReplace();
  giveDivName();
  var boxInfo = getOrigValues();

  $("#reportWrapper div").css("overflow", "hidden");
  $("a[class=close]").bind("click", function(){
   $(this).parents("div:eq(0)").animate({
    height: '30px'
   }, 1000);      
  });
  $("a[class=open]").bind("click", function(){
   var clicked = $(this);
   $("a[class=open]").each(function(){ 
    if( clicked.attr("name") !== $(this).attr("name") )
    {
     $(this).parents("div:eq(0)").animate({
      height: '30px'
     }, 1000);
    }
    else
    {
     var element = $(this);
     function getNewHeight(element, boxInfo) // get the height for when clicked to open
     {
      var divName = element.parents("div:eq(0)").attr("name");
      $.each(boxInfo,function(i,n) {
       if( n.boxName == divName )
       {
        var newHeight = n.boxHeight;
       }
      });

     }
     getNewHeight(element, boxInfo);
     clicked.parents("div:eq(0)").animate({
      height: newHeight + 'px'
     }, 1000);
    }
   });
  });
 }