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

Question

I have the following markup:

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

And the following jQuery:

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

The value I get returned is undefined. How do I find the value of the id attribute for an element of the class '.check' when the tag is before or after the input (ie if all the tags were after I would use $().next())?

Answer 1

Try

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

Demo: Fiddle

Answer 2

use next if input and prev if textarea....; try this

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

First your html is incorrect, remember that the attribute ID must be unique.

Then, you can go to the parent (ie the form tag) and find the child you want, like this:

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

Answer 4

try this

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

Answer 5

You are using closest() wrong. Closest fetches the closest parent. Best approuch is going back to its parent and fetch the child. Find and first will both work in this case

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