jQuery - create an array from HTML data attributes

Question

I've got a series of, what I'm calling stacks - within which will sit a h1, h2 and some paragraph text. Each of these elements uses a data-style attribute that has the font family name as the value.

For instance:

<h1 data-style="arial">Heading 1</h1>

What I would like to do using jQuery; get the values of the elements within the stack, upon hovering the stack - so hovering each stack will reveal the fonts used on that particular stack. Then once I've got the information, place it for the user to see within an info panel.

Perhaps I'm going the long route on this one, I'm open to improving how I'm going about things. I am however majorly lost right now, it's time to ask for some help.

*ADDED a jsfiddle incase anyone wants a play: http://jsfiddle.net/62rG4/2/

My HTML:

<div id="font-info">
    <h4>The follow fonts are used in this stack:</h4>

    <p class="h1">h1:</p>
    <p class="h2">h2:</p>
    <p class="body">body:</p>
</div>

<div class="stack-1">
    <h1 data-style="myfont">Heading 1</h1>
    <h2 data-style="myfont">Heading two here</h2>
    <p data-style="myfont">Hello world!</p>
</div>

<div class="stack-2">
    <h1 data-style="myfont">Heading 1</h1>
    <h2 data-style="myfont">Heading two here</h2>
    <p data-style="myfont">Hello world!</p>
</div>

jQuery (so far)

var fontInfo = null;

function letsGetThisFont(){
    var fontInfo = $.map($("h1,h2,p").attr("data","style"), function (el, i) {
         return $(el).text();
    });
    joined = fontInfo.join(" ");

    return joined;
}

$(".stack-1").hover(function(){
    console.log(letsGetThisFont());
});

I don't think you can get the font in jQuery but you can use a plugin that works it out from the width of the text see here; [link]http://stackoverflow.com/questions/15664759/jquery-how-to-get-assigned-font-to-element. — lpoulter, Feb 23 '14 at 21:17

score 0 · Accepted Answer · answered Feb 25 '14 at 02:18

A Few Points

The $.map() method is used to process a plain array or object.
Use .map() to process a jQuery object containing a collection of DOM elements
The $("h1,h2,p") selector will select all of those elements in the document, not just the stack you hovered over. You need a way to identify the target stack.
The attr("data","style") method will try to set the value of a data attribute to equal style.
Use attr("data-style") to get the value of the data-style attribute.

Try This

I took a stab at it. I'm not sure if this is exactly what you want, but maybe it can get you going in the right direction.

HTML

<div id="font-info">
    <h4>The follow fonts are used in this stack:</h4>
    <p class="h1">h1:</p>
    <p class="h2">h2:</p>
    <p class="body">body:</p>
</div>

<div class="stack">
    <h1 data-style="myfont1">Heading 1 - Stack 1</h1>
    <h2 data-style="myfont2">Heading two here - Stack 1</h2>
    <p data-style="myfont3">Hello world! - Stack 1</p>
</div>

<div class="stack">
    <h1 data-style="myfont6">Heading 1 - Stack 2</h1>
    <h2 data-style="myfont5">Heading two here - Stack 2</h2>
    <p data-style="myfont4">Hello world! - Stack 2</p>
</div>

I altered the HTML somewhat. I changed the text and the values of the data-style attributes for testing purposes, so I could see I was getting the the right elements. I also removed the unique stack-* values for the div classes. It's easier to add the hover function to all stacks that way. If you need a unique identifier, you could add an id attribute.

CSS

I changed this CSS line:

div[class*="stack-"]{

to this:

.stack {

JavaScript

$(".stack").hover(function() {
    var fonts = {};

    $(this).find("h1,h2,p").each(function() {
        var tag = $(this).prop("tagName").toLowerCase();
        var font = $(this).attr("data-style");
        fonts[tag] = font;
    });

    $("#font-info")
        .find(".h1").text("h1: " + fonts.h1)
        .end()
        .find(".h2").text("h2: " + fonts.h2)
        .end()
        .find(".body").text("body: " + fonts.p);
});

Both .map() and .each() will give the same result, but I think the code is more clear with .each() since we don't need to produce a new jQuery object.

This will work for any number of divs with class="stack". It will get the value of the data-style attribute for the last h1 element and last h2 element and last p element contained within the hovered div.

Thanks @toxalot - I came up with a different solution but I think yours is cleaner! — Gerico, Feb 27 '14 at 14:14

jQuery - create an array from HTML data attributes

1 Answers1

A Few Points

Try This