Question

I’ve this code into my form:

    <li id="form-item_title">
        <label class="desc">Title</label>
        <div>
        <select id="title" class="field select" style="">
                <option value="">...</option>
        </select>
        <p class="error_descr"></p>
        </div>
    </li>
    <li id="form-item_country">
        <label class="desc">Country</label>
        <div>
        <select id="country" class="field select" style="">
                <option value="">...</option>
        </select>
        <p class="error_descr"></p>
        </div>
    </li>

All I need is adding some content to a specific error_descr paragraph. I did this but it’s not working:

jQuery('li#form-item_title p.error_descr').html("Required");
jQuery('li#form-item_title p.error_descr').show();

How to do that?

Answer 1

jQuery('li#form-item_title p.error_descr').html("Required").show();

Notice you can chain your function calls to avoid using the same selector multiple times.

You can also select the error_descr elements by their association with the form element they are siblings with:

jQuery('#title').on('change', function () {
    jQuery(this).siblings('.error_descr').html('Required').show();
});

Here is a demo: http://jsfiddle.net/xnVzs/

UPDATE

Also you can improve the performance of your selectors by doing this:

jQuery('#form-item_title').find('.error_descr').html("Required").show();

It generally takes more time to select an element if you add the tag name.