Как получить доступ к этому абзацу с помощью jQuery?

Question

У меня есть этот код в моей форме:

    <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>

Все, что мне нужно, это добавить некоторый контент в конкретный абзац error_descr. Я сделал это, но он не работает:

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

Как это сделать?

Answer 1

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

Обратите внимание, что вы можете связывать вызовы функций, чтобы избежать многократного использования одного и того же селектора.

Вы также можете выбрать элементы error_descr по их ассоциации с элементом формы, с которым они связаны:

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

Вот демонстрационная версия: http://jsfiddle.net/xnVzs/

ОБНОВЛЕНИЕ

Также вы можете улучшить производительность ваших селекторов, выполнив это:

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

Обычно для выбора элемента требуется больше времени, если вы добавляете имя тега.

Answer 2

Вы злоупотребляете id.

id должен быть уникальным, поэтому только один элемент может иметь один id. Если вы хотите свойство, которое может группировать много элементов, попробуйте class.

var paragraph = jQuery('p.error_descr').eq(1);

paragraph.html("Required");
paragraph.show();

.eq(1) выбирает второй элемент, соответствующий этому селектору.

Answer 3

Вы должны изменить form-item_title на класс - id должен быть уникальным.

$("li.form-item_title p")
    .text("Required")
    .show();

И вам не обязательно нужен дополнительный класс в селекторе, так как есть только один p в li.

Кроме того, всегда не забывайте оборачивать свой манипулятивный DOM Javascript в DOM-ready слушателя.JQuery имеет это:

$(document).ready(function(){ ... });

или:

$(function(){ ... });