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>

I have the following html. I am planning on doing some Jquery validation on the input box. If this is invalid I want to add the error class to the 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;

I've tried to target the parent but see that this div is further up the parent heirachy. so tried to select up the heirachy with more parent tags, but think I am straying well off course from understanding the correct way to target the div.

Answer 1

I suggest using .closest() :

Description : For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.

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