How to do this simple set of nearly identical js without so much repeating?

I'm trying to learn DRY coding and wondering how to do this sort of thing with a lot less code.

ie I have something like this:

var option_shipping = $('#option_shipping div.selected .tag').text(),
    option_payment = $('#option_payment div.selected .tag').text(); 

if(option_开发者_StackOverflowshipping.length < 1) {

    error = 1;  

    $('.option_shipping_wrap').addClass('attention');

}

if(option_payment.length < 1) {

    error = 1;

    $('.option_payment_wrap').addClass('attention');

}

What is the most minimal way something like this can be done?

---

How about:

function checkLengthError(obj_type) {
    var option = $('#option_'+obj_type+' div.selected .tag').text()
    if(option.length < 1) {
        error = 1;  
        $('.option_'+obj_type_'_wrap').addClass('attention');
    }
}
checkLengthError('shipping');
checkLengthError('payment');

In general, you should be looking for what's repetitive, and what's not. You repeat the actions being done on the DOM objects, but you're just switching what object's being manipulated - so figure how to "globalize" the reference to the object so that a variable for example can change what object is being accessed, and that variable (or argument, in this case) would only be changed once to do the whole job on a different object.

In short, only 'shipping' and 'payment' was the difference here, so in my example I just made sure I can change those to whatever I need and dumped everything in a function that can easily be accessed and modified to avoid repetition of code and repetitive editing when you wanna change something.

---

if you using jQuery, you can make a little plugin for your needs:

jQuery.fn.checkShipping = function () {
    return this.each(function () {
        var txt = jQuery(this).find('div.selected .tag').text(),
            wrapId = this.id+'_wrap';
        if (!txt.length) {
            error = 1;
            jQuery('#'+wrapId).addClass('attention');
        }
    });
};

then you can call it anywhere, and enjoy the advantages of chaining:

$('#option_shipping, #option_payment').checkShipping().hide().doSomethingElse();

---

try this (if every item has a prefix of option_ you can even shorten this

$(document).ready(function() {
    var arr = [ "option_shipping", "option_payment", ... ]; var error = 0;
    $.each(arr,function(index, item)
    {
        if ($('#'+item+' div.selected .tag').text().length < 1) {
                    error++;
                    $('.'+item+'_wrap').addClass('attention');
                }
    });
});

---

something like this ...

function BringAttentionTo(optionName) {
    var text = $('option_' + optionName + ' div.selected .tag').text();
    if (text.length < 1) {
        $('.option_' + optionName + '_wrap').addClass('attention');
        return true;
    }
    return false;
}

if (BringAttentionTo('shipping')) error = 1;
if (BringAttentionTo('payment')) error = 1;

---

Consider using the jQuery validation plugin. In this case you have to write almost no code for the actual validation but just define some rules.