如何获得img jquery旁边最接近的输入值？

Question

I want to get the closest input value when user click the img in jquery, how can I do that? For instance, if user click img a, it will get the value'1'.

 <img src="">a</img> <input type="hidden" value="1" /> <img src="">b</img> <input type="hidden" value="2" /> <img src="">c</img> <input type="hidden" value="3" /> <img src="">d</img> <input type="hidden" value="4" /> <img src="">e</img> 

Answer 1

Use next()

 $('img').click(function() { var value = $(this).next().val(); alert(value); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <img src="" alt=a /> <input type="hidden" value="1" /> <img src="" alt=b /> <input type="hidden" value="2" /> <img src="" alt=c /> <input type="hidden" class=a value="3" /> <img src="" alt=d /> <input type="hidden" value="4" /> <img src="" alt=e /> 

Update: If there is any other elements after the input then you need to use nextAll() and first()

 $('img').click(function() { var value = $(this).nextAll('input').first().val(); // you can avoid first(), since val() return value of first element from selector // var value = $(this).nextAll('input').val(); alert(value); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <img src="" alt=a /> <input type="hidden" value="1" /> <span>hello</span> <img src="" alt=b /> <input type="hidden" value="2" /> <span>hello</span> <img src="" alt=c /> <input type="hidden" value="3" /> <span>hello</span> <img src="" alt=d /> <input type="hidden" value="4" /> <img src="" alt=e /> 

Answer 2

try this

$('img').click(function() {
  var value = $(this).next().val();
});

Answer 3

$("img").click(function(){
   alert($(this).parents('.input-group').find('input').val());
});

Hope this will help you !!

Answer 4

There will be img tags other than these in your page, I guess. in that case it will be better if you can surround these img tags with a div and do something like below.

<div id="parentDiv">
    <img src="">a</img>
    <input type="hidden" value="1" />
    <img src="">b</img>
    <input type="hidden" value="2" />
    <img src="">c</img>
    <input type="hidden" value="3" />
    <img src="">d</img>
    <input type="hidden" value="4" />
    <img src="">e</img>
</div>

and the jquery you should put is,

$("#parentDiv img").each(function(){

    $(this).click(function(){

        if($(this).next().val()){

            alert($(this).next().val());
        }
    });
});

if your page doesn't have any other img tags other than these just keep the html as it is and put this peace of code

$("img").click(function(){

    if($(this).next().val()){

        alert($(this).next().val());
    }
});