Populating array with items from different HTML attributes

Question

I have about 1000 images and textareas with the same class name and a custom attribute. The classes names are emoticon and emoticonlist respectively. The custom attributes are emo-tag and emo-ascii respectively.

Each image has its partner (a textarea) with the exact same content in its custom attribute.

Example:

emo-tag   = "f-x" // for images
emo-ascii = "f-x" // for textareas

where x represents a number from 0 to 999.

My script captures the images attributes and what I need with no problem. The problem starts when I try to get the value of the textarea which have the exact attribute content like the image.

Here is my code:

$(function(){
var json = [];

$('img').each(function(){
    var emoimg  = $(this).attr("src");
    var emoalt  = $(this).attr("alt");
    var emotag  = $(this).attr("emo-tag");

    //Does not this supposed to capture the value of this specific textarea?
    var emoascii= $('.emoticonlist').attr("emo-ascii",emotag).val();

        json.push({
            id : emotag,
            name : emoalt,
            img : emoimg,
            content: emoascii       
        });

});
  var s = JSON.stringify(json);
  $("#content").after("<div>" + s + "</div>");
});

Like I said, the code works but the textarea captured and pushed into the array is just the first one and all the items of the array. How can I accomplish what I want?

Current Output:

[
{"id":"emo-0","name":"Smiley Face","img":"images/smiley-face.png","content":":)"},
{"id":"emo-1","name":"Big smile","img":"images/big-smile.png","content":":)"},
{"id":"emo-2","name":"Sad face","img":"images/sad-face.png","content":":)"},
...
...
...
]

Desired Output:

[
{"id":"emo-0","name":"Smiley Face","img":"images/smiley-face.png","content":":)"},
{"id":"emo-1","name":"Big smile","img":"images/big-smile.png","content":":D"},
{"id":"emo-2","name":"Sad face","img":"images/sad-face.png","content":":("},
...
...
...
]

Could you please use the 'code block' tool when editing to give working fiddle example? If cant get it to work, then please include enough html and such that we can make easy fiddle. Thanks — Daniel Brose
– Daniel Brose, Commented Dec 17, 2015 at 0:17
$('.emoticonlist').attr("emo-ascii",emotag) sets the attribute. It does not get it like you want (api.jquery.com/attr). — Lucas
– Lucas, Commented Dec 17, 2015 at 0:18

Lucas · Accepted Answer · 2015-12-17 00:44:22Z

3

Using $('.emoticonlist').attr("emo-ascii",emotag), you're setting the attribute instead of getting the element where the attribute is equal to emotag.(http://api.jquery.com/attr/)

Perhaps try replacing the line

var emoascii= $('.emoticonlist').attr("emo-ascii",emotag).val();

with

var emoascii= $('.emoticonlist[emo-ascii=' + emotag +']').val();

(https://api.jquery.com/attribute-equals-selector/)

edited Dec 17, 2015 at 0:44

answered Dec 17, 2015 at 0:23

Lucas

1,3997 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

iVoidWarranties Over a year ago

Thanks! It finally works! That was exactly the solution.

Collectives™ on Stack Overflow

Populating array with items from different HTML attributes

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related