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

您必须将form-item_title更改为班级 - id必须是唯一的。

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

并且您不一定需要选择器中的其他类，因为p中只有一个li。

此外，请始终记住将DOM操作Javascript包装在支持DOM的侦听器中。 jQuery有这个：

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

或：

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

Answer 3

您滥用id。

id意味着唯一，因此只有一个元素才能拥有一个id。如果您想要一个可以对多个元素进行分组的属性，请尝试class。

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

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

.eq(1)选择与该选择器匹配的第二个元素。

如何使用jQuery访问此段落？

3 个答案: