CODEWITHSUNDEEP
javascriptjquery
barak
barak

Reputation: 179

js jQuery, is there a way to set/get multi value in attribute?

I'm trying to set an attribute to an element that has multiple values. Is it possible?

I want to get the div element size (height, width) and set it inside an array and then set the array as the attribute value.

What I did is this:

function originBoxSize() {
    each('body div', function () {
        var boxSize = [$(this).css('height'), $(this).css('width')];// get the box size 
        $(this).attr('wcag-origin-box-size', boxSize); // set an new attr with boxsize value
    });

}

Now boxSize holds ["102px", "499px"]

The attr looks like this:

wcag-origin-box-size="102px,499px"

When I want to get the attr value Im typing the line:

$('#element').attr('wcag-origin-box-size')

The result is this : "102px,499px" which is a string.

Is there a way to get only specific value from the attribute (height or width)?

Thanks in advance.

Upvotes: 1

Views: 336

Answers (4)

syoels
syoels

Reputation: 154

There's a good answer for you here

Basically you need to use jQuery's data function instead of "attr", and give the data in a format that is JSON valid.

I fixed your code (which really wasn't far from the right way), and here is a working example:

function originBoxSize() {
  $('body div').each(function() {

    // Get the box size 
    var boxSizeString = '["' + $(this).css('height') + '","' +
      $(this).css('width') + '"]';
    boxSize = JSON.parse(boxSizeString);

    // Set an new attr with boxsize value
    $(this).data('wcag-origin-box-size', boxSize);
  });
}

// Set all data-wcag-origin-box-size
originBoxSize();

// Show result
var a_size = $('#a').data('wcag-origin-box-size');
var b_size = $('#b').data('wcag-origin-box-size');
$('#a').html("<p>height: " + a_size[0] + "</p>" +
  "<p>width: " + a_size[1] + "</p>");
$('#b').html("<p>height: " + b_size[0] + "</p>" +
  "<p>width: " + b_size[1] + "</p>");
div {
  margin: 3px;
  border: 2px solid white;
  color: white;
  padding: 7px;
  line-height: 14px;
  font-size: 12px;
}
#a {
  height: 90px;
  width: 120px;
  background: red;
}
#b {
  height: 65px;
  width: 200px;
  background: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="a"></div>
<div id="b"></div>

Upvotes: 1

Md Rahman
Md Rahman

Reputation: 1820

You can try this in your way.

function originBoxSize() {
    each('body div', function () {
        var boxSize = [{height:$(this).css('height'),width:$(this).css('width')}];
        var myJsonString = JSON.stringify(boxSize);
        $(this).attr('wcag-origin-box-size', myJsonString ); 
    });

}

var myObject = JSON.parse($('#element').attr('wcag-origin-box-size'))

You can get values from the myObject: 

var height = myObject[0].height;
var width = myObject[0].width;

Upvotes: 0

Chris Lear
Chris Lear

Reputation: 6742

You can use jquery data for this.

Something like

$(this).data('wcag-origin-box-size', boxSize);

Then, later fetch using

$('#element').data('wcag-origin-box-size');

See https://api.jquery.com/data/

Upvotes: 0

Ram
Ram

Reputation: 144659

The attribute value must be a string, so the browser converts the array into a string. Result of stringifying an array is equal to calling the Array.prototype.join method.

For converting the string into an array, you can reverse the process: split by ,:

var array = value.split(',');

Another option that you have is using the jQuery .data() method which can store an array as it is.

The new data value [...] can be any Javascript type except undefined.

$(this).data('wcag-origin-box-size', boxSize);

Upvotes: 1

Related Questions