javascript - jQuery选择包含目标的div

Question

<div class="row">
    <label for="txtTitle">Title</label>
    <div class="holder">
        <div class="text-holder"> <span class="ico-error"></span><span class="text"> <input id="txtTitle"
     runat="server" type="text" value="" /></span>  <span class="t-l">
     </span><span class="b-l"></span><span class="t-r"></span><span class="b-r"></span> 
        </div>
    </div>
</div>

我有以下html。我打算对输入框进行一些 Jquery 验证。如果这是无效的，我想将错误类添加到 div

        var isValid = true;
        var errorMessage = '';
        if ($('#<%=txtTitle.ClientID %>').val() == '') {
            $('#<%=txtTitle.ClientID %>').parent().parent().parent(".row").addClass("error");
            isValid = false;
            errorMessage += "Firstname is required\n";
        }
        return isValid;

我试图以父母为目标，但看到这个 div 比父母更进一步。所以试图用更多的父标签选择 heirachy，但认为我偏离了正确的定位 div 的方法。

Answer 1

我建议使用.closest()：

描述：对于集合中的每个元素，通过测试元素本身并向上遍历其在 DOM 树中的祖先来获取与选择器匹配的第一个元素。

var isValid = true;
var errorMessage = '';
var $this = $('#<%=txtTitle.ClientID %>');

if ($this.val() == '') {
    $this.closest(".row").addClass("error");
    isValid = false;
    errorMessage += "Firstname is required\n";
}
return isValid;

Answer 2

如果您需要查找树，请使用.parents()方法并将其传递给包含 div 的类，即：.parents('.row')