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

使用

 $(this).val()

而不是

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

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

Answer 2

试试这个：

$(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 3

这是使用filter()

的一个很好的用例

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

Answer 4

我尝试this：

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

Answer 5

您可以按其值filter输入

＆＃13;

// value passed by string, for example 2:
var queryStringVal = 2;

$('.main input').filter(function(index, element) {
  return element.value == queryStringVal;
}).closest('.main').show();

＆＃13;

.main {
  display: none;
}

＆＃13;

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

＆＃13;

如何查找带起始值的输入字段

5 个答案: