如何使用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"));