Как найти поле ввода с начальным значением

Question

Я получил некоторые вложенные элементы input и хотел бы отобразить только тот, который имеет номер value, переданный query string.

Вся часть строки запроса работает, и я сохранил ее в значении, но мой код для обнаружения обертки .main, содержащей правильное поле input, кажется, сломан.

HTML

// multiple times the same row with different input values 
<div class="main"> 
    <div> 
    <div> 
     <input type="text" class="hidden" value="4"> 
     <input type="text" class="hidden" value="4"> 
    </div> 
    </div> 
</div> 

JQuery

// value passed by string, for example 2: 
var queryStringVal = 2; 

$('.main').each(function() { 
    var inputFields = $(this).find('input'); 

    inputFields.each(function() { 
    var inputFieldVal = $(this).getAttribute('value'); 

    if (inputFieldVal == queryStringVal) { 
     console.log("Found input field with value " + queryStringVal); 
     $(this).closest('.main').show(); 
    } 

    }); 
}); 

Я создал этот JS FIDDLE DEMO, чтобы продемонстрировать эту проблему. Как я могу исправить это и показать только обертки .main, содержащие входы с правильным значением?

Answer 1

это хороший случай использования для использования filter()

$('.main').filter(function() { 
    return $(this).find('input').filter(function() { 
     return this.value == queryStringVal; 
    }).length; 
}).show(); 

Answer 2

использование

$(this).val() 

вместо

$(this).getAttribute('value'); 

https://jsfiddle.net/fLf6y03o/4/

Answer 3

Попробуйте это:

$(document).ready(function() { 

    var queryStringVal = 2; 

    $(".main input").each(function(){ 

     var value = $(this).attr("value"); 

     if (value == queryStringVal) 
      $(this).closest(".main").show(); 

    }) 

}) 

Окончательный код:

$(document).ready(function() { 
 
    
 
    var queryStringVal = 2; 
 
    
 
    $(".main input").each(function(){ 
 
     
 
     var value = $(this).attr("value"); 
 
     
 
     if (value == queryStringVal) 
 
      $(this).closest(".main").show(); 
 
     
 
    }) 
 
      
 
})

.main { 
 
    
 
    display: none; 
 
    
 
}

<div class="main"> 
 
      <div> 
 
      <div> 
 
       <input type="text" value="2"> 
 
       <input type="text" value="2"> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     
 
<div class="main"> 
 
    <div> 
 
     <div> 
 
     <input type="text" value="4"> 
 
     <input type="text" value="4"> 
 
     </div> 
 
    </div> 
 
</div> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

Answer 4

Вы мои попробовать this:

$(document).ready(function() { 
    var queryStringVal = 2; 
    $('input.hidden[value='+queryStringVal+']').closest('.main').show(); 
}); 

Answer 5

Вы можете filter входов их значение :

// value passed by string, for example 2: 
 
var queryStringVal = 2; 
 

 
$('.main input').filter(function(index, element) { 
 
    return element.value == queryStringVal; 
 
}).closest('.main').show();

.main { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<div class="main"> 
 
    <div> 
 
     <div> 
 
      <input type="text" class="hidden" value="4"> 
 
      <input type="text" class="hidden" value="4"> 
 
     </div> 
 
    </div> 
 
</div> 
 

 
<div class="main"> 
 
    <div> 
 
     <div> 
 
      <input type="text" class="hidden" value="2"> 
 
      <input type="text" class="hidden" value="2"> 
 
     </div> 
 
    </div> 
 
</div> 
 

 
<div class="main"> 
 
    <div> 
 
     <div> 
 
      <input type="text" class="hidden" value="3"> 
 
      <input type="text" class="hidden" value="3"> 
 
     </div> 
 
    </div> 
 
</div>