jQuery隐藏最接近的按钮

Question

I am learning jQuery and I'm stuck on this.

I am trying to hide button when input value is 200, but there are other inputs too. This question has been asked earlier but I couldn't figure it out in my case.

 $("document").ready(function() { setTimeout(function() { var test = $('.input-text').val(); if (test = 200) { $('button').hide(); } }, 10); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="first"> <input class="input-text qty text" type="number" readonly="" value="200"> <button> Hide me </button> </div> <div class="second"> <input class="input-text qty text" type="number" readonly="" value="300"> <button> Hide me </button> </div> <div class="third"> <input class="input-text qty text" type="number" readonly="" value="400"> <button> Hide me </button> </div> 

Answer 1

Try like following.

 $("document").ready(function() { setTimeout(function() { $('.input-text').each(function() { if (this.value == 200) { $(this).next('button').hide(); } }); }, 10); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="first"> <input class="input-text qty text" type="number" readonly="" value="200"> <button> Hide me </button> </div> <div class="second"> <input class="input-text qty text" type="number" readonly="" value="300"> <button> Hide me </button> </div> <div class="third"> <input class="input-text qty text" type="number" readonly="" value="400"> <button> Hide me </button> </div> 

Answer 2

You have a few issues in your logic.

• setTimeout is unnecessary
• val() returns a string which you're comparing to an int, which will give some unreliable outcomes.
• there are multiple input elements, so you need to evaluate their values individually.
• you're hiding all button elements, you need to traverse the DOM to find the button related to each input

With that said, this should work for you:

 $("document").ready(function() { $('.input-text').each(function() { if (parseInt($(this).val(), 10) == 200) { $(this).next('button').hide(); }; }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="first"> <input class="input-text qty text" type="number" readonly="" value="200"> <button> Hide me </button> </div> <div class="second"> <input class="input-text qty text" type="number" readonly="" value="300"> <button> Hide me </button> </div> <div class="third"> <input class="input-text qty text" type="number" readonly="" value="400"> <button> Hide me </button> </div> 

Answer 3

You have a number of issues.

var test = $('.input-text').val(); Will only ever retrieve the value of the first .input-text

if (test = 200) is assigning test = 200 rather than evaluating ( == ).

$('button').hide(); will hide every button on the page.

You could filter the buttons, and return the ones whose previous input value is 200, and then hide them:

$('.input-text + button').filter( function() {
  return $(this).prev().val() == 200;
}).hide();

Here's a fiddle

Answer 4

使用jQuery.nearest

$('#id').closest(".classname");

Answer 5

$("document").ready(function() {
    setTimeout(function() {
       $('.input-text').each(function(){
       var test = $(this).val();
       if(test == 200) {
          $('.input-text').next("button").hide();
       }
});

    },10);
});

You need to check sibling of all .input-text where condition is met with next() .

next() selects the first sibling of element you selected depending on condition ( if .val == 200 ). And then it makes that sibling gone.

Also, you should test all .input-text elements with each() .