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

Question

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.

why don't you just split the value with , ? $('#element').attr('wcag-origin-box-size').split(",")[0] will give you the height. — Anoop Joshi P, Jun 02 '16 at 13:41
Look at `getComputedStyle()` https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle — StudioTime, Jun 02 '16 at 13:42
I can do that, incase I wont succssed this way I will split, but Im sute there is a way to get/set multiple values — barak, Jun 02 '16 at 13:43
You could set each value to its own attribute. Or serialize the array/object/etc. to a string, set that, and de-serialize it when reading it. Or, as already suggested, just split the string (which is basically just a custom serialization). An attribute itself can contain only one value, and that value is a string. — David, Jun 02 '16 at 13:46

score 1 · Answer 1 · answered Jun 02 '16 at 13:45

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

score 1 · Answer 2 · edited May 23 '17 at 11:58

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>

score 0 · Answer 3 · answered Jun 02 '16 at 13:47

0

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/

answered Jun 02 '16 at 13:47

Chris Lear

6,592
1
18
26

score 0 · Answer 4 · answered Jun 02 '16 at 14:01

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;

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

4 Answers4