我想在单击跨度时找到最接近跨度的输入元素，你能帮我吗？

Question

I want to find an input element closest a span when i click the span

HTML

<div>
   <span class="text"></span>
   <input type="text" name="an_element_name">
</div>
<div>
   <span class="text"></span>
   <input type="text" name="an_element_name">
</div>

JQuery

$('.text').click(function(e){
   let text = $(e.target),
       input = text.closest('input[name=an_element_name]').find('input[name=an_element_name]');

   input.val('some value');
});

but, I'm still can't set a value of the input. Can you help me ?

Answer 1

You need to use text.next('input[name=an_element_name]'); since the .closest() is looking for an ancestor of your span, not siblings.

• .closest() = Goes up the html tree and search for the element.
• .next() = Searches for an element after the current element.
• .find() = Searches for children of the given element.

Demo

 $('.text').click(function(e){ let text = $(e.target), input = text.next('input[name=an_element_name]'); input.val('some value'); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <span class="text">click</span> <input type="text" name="an_element_name">

Answer 2

You are using closest() incorrectly, you should use next() instead.

next(): Get the immediately following sibling of each element in the set of matched elements. If a selector is provided, it retrieves the next sibling only if it matches that selector.

You can achieve it in this simple way

 $('.text').click(function(e){ let text = $(e.target), input = text.next('input[name=an_element_name]'); input.val('some value'); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <span class="text">Click me</span> <input type="text" name="an_element_name">