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