如何使用jQuery查找最接近元素的屬性？

Question

我有以下標記：

<div class="span6">
             <form> 
                <fieldset>
                    <label>Name:</label>
                    <input type="text" class="success field span6" placeholder="Name" name="name" id="name"> <i id="name" class="check"></i>
                    <label>Email:</label>
                    <input type="text" class="field span6" placeholder="Email" name="email" id="email" > <i id="email" class="check"></i>
                    <label>Message:</label>
                    <i id="message" class="check"></i><textarea class="field span9" rows="8" placeholder="Message" name="message" id="message"></textarea>
                    <label class="checkbox">
                    </label>
                    <button type="submit" class="btn disabled">Send Message</button>
                </fieldset>
            </form>
        </div>
    </div>

和下面的jQuery：

    $('input,textarea').keyup(function(){
       console.log($(this).closest(".check").attr("id"));
    });

我返回的值是不確定的。 當標簽在輸入之前或之后（即，如果所有標簽都在我將使用$（）。next（）之后）時，如何查找類'.check'的元素的id屬性值？

Answer 1

嘗試

var check = $(this).next(".check");
if(!check.length){
    check = $(this).prev(".check");
}
console.log(check .attr("id"));

演示： 小提琴

Answer 2

如果輸入則使用next如果是textarea則使用prev 。 嘗試這個

var checkID='';
 $('input,textarea').keyup(function(){
   if($(this).is("input")){
     checkID=$(this).next(".check").attr("id");
   }else{
     checkID=$(this).prev(".check").attr("id");
   }
      console.log(checkID);
});

Answer 3

首先，您的html不正確，請記住屬性ID必須是唯一的。

然后，您可以轉到父項（即form標簽）並找到所需的子項，如下所示：

$('input,textarea').keyup(function(){
   console.log($(this).parents("form").find(".check").attr("id"));
});

Answer 4

嘗試這個

$('input,textarea').keyup(function(){
       console.log($(this).find().closest(".check").attr("id"));
    });

Answer 5

您使用close（）錯誤。 最接近的將獲取最接近的父級。 最好的approuch回到其父級並獲取該子級。 在這種情況下，查找和首先都可以使用

console.log($(this).parent().first(".check").attr("id"));