CODEWITHSUNDEEP
javascriptjquerydom
Jhonnatan Gonzalez Rodriguez
Jhonnatan Gonzalez Rodriguez

Reputation: 573

Modifing multiple DOM items at a time

i am trying to change placeholders for values in a form if internet explorer is version 9 or 8, i got this pice of code.

if( $("html").data("version") == "IE9-10"  ){
        var brand = $(".brand input");
        var value = brand.attr("placeholder");
        var model = $(".model input");
        var value2 = model.attr("placeholder"); 
        brand.val(value);
        model.val(value2);
}

I will like to know if there is a way i can make code more simple and less repetitive to achieve this same effect, i just need to select .brand input and .model input, store it placeholder value and replace the in put value with the placeholder value, I will appreciate if you guys could help me with this.

here is the HTML, im using a plugin who convert select to custom design, but the plugin uses placeholder and I need to support ie9 and ie8, so ill show you the html of the select and the html output of the plugin.

<select name="brand" class="brand" style="display: none;">
    <option value="">Marca</option>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
</select>

Plugin Output

<div class="brand">
    <input type="text" value="" placeholder="Marca">
    <ul>
        <li data-value="volvo" class="">Volvo</li>
        <li data-value="saab" class="">Saab</li>
        <li data-value="mercedes" class="">Mercedes</li>
        <li data-value="audi" class="">Audi</li>
        <li class="minict_empty">Ningun resultado concuerda con la palabra.</li>
    </ul>
</div>

Upvotes: 1

Views: 69

Answers (3)

Gabriele Petrioli
Gabriele Petrioli

Reputation: 195982

Try

$('.brand, .model').find('input').val(function(){
   return this.placeholder;
   // or $(this).attr('placeholder'); if IE cannot access the attribute directly
});

demo at http://jsfiddle.net/deE5A/

Upvotes: 2

Platinum Azure
Platinum Azure

Reputation: 46183

Since you're doing the same operation on each one, you could combine the selectors and use .each():

if( $("html").data("version") == "IE9-10"  ){
    $(".brand input, .model input").each(function () {
        // In this function, "this" is the raw DOM element being iterated over,
        // so $(this) is a jQuery wrapper around that element.

        var $this = $(this);   // I like caching to save jQuery constructor calls :-)
        $this.val($this.attr("placeholder"));
    });
}

Upvotes: 1

dcasadevall
dcasadevall

Reputation: 316

$(".brand input, .model input").each(function(){
    $(this).val($(this).attr("placeholder"));
});

That should do it :).

Upvotes: 0

Related Questions