Set text input in its own scope

Question

Basically, I am trying to use a data attribute from a input text element to set a default value:

$('.fontsizepick').val($("#preview-iframe").contents().find($(this).data('obj')).css('font-size'));

The goal is to get the font size from another element and give it as a value to this input text element. There can be many elements.

This does not work. It gives me no error either.

Here is How I did it with a select:

$(".fontpick option").filter(function() {
    //may want to use $.trim in here
    return $(this).text() == $("#preview-iframe").contents().find($(this).parent().data('obj')).css('font-family');
}).prop('selected', true);

So, I am wondering how I can set a element with a class and give it a value and use its own attributes, basically I want access to the $(this)...

How can I do that?

Is the iframe on the same domain? – putvande Jun 05 '14 at 08:29 — putvande, Jun 05 '14 at 08:29

score 0 · Answer 1 · answered Jun 05 '14 at 08:30

jQuery's .val() can accept a function, whose context will be the input element, so you can use $(this).

$('.fontsizepick').val(function(){
    return $("#preview-iframe").contents().find($(this).data('obj')).css('font-size');
});

From the .val() docs:

A function returning the value to set. this is the current element. Receives the index position of the element in the set and the old value as arguments.

score 0 · Answer 2 · answered Jun 05 '14 at 08:30

0

You need to use a function, so that $(this) will be set to the appropriate element.

$('.fontsizepick').val(function() {
    return $("#preview-iframe").contents().find($(this).data('obj')).css('font-size');
});

answered Jun 05 '14 at 08:30

Barmar

741,623
53
500
612

Set text input in its own scope

2 Answers2