jquery select all input with class给出错误的结果？答案

【问题标题】：jquery select all inputs with class gives wrong results?jquery select all input with class给出错误的结果？
【发布时间】：2019-11-24 18:38:10
【问题描述】：

我正在尝试读取 form-elementNameInput 类的所有输入
迭代后：

 <li class="liClass"><div class="containerClass">

其中有 2 个（text1 和 text2）
出于某种原因，我从其中一个按钮中得到了错误的结果，我不确定为什么？
我也试过了

 $(this).first(".form-elementNameInput").text();

完整代码：

function readInputText(){
  var elementText;
  $('li.liClass>div.containerClass').each(function(){				 
   elementText = $(this).first("input.form-elementNameInput:text").text();
   console.log("#" + elementText + "#");
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ol>
 <li class="liClass">
  <div class="containerClass">
    <input type="hidden" id="typeSave" name="typeSave" value="" />
     <div class="form-group row">
              <div class="col-xs-2">
       <input type="text" class="form-elementNameInput" aria-describedby="inputGroup-sizing-sm" value="text1"></input>
       </div>
       <div class="col-xs-2">
        <button class="btn btn-primary" id="btn_sel">
             <i class="fa fa-home"></i>
             <span style="width:3em;">
              </span>Select Type
            </button>
       </div>
     </div>
  </div>
 <li>
   <li class="liClass">
  <div class="containerClass">
    <input type="hidden" id="typeSave" name="typeSave" value="" />
     <div class="form-group row">

              <div class="col-xs-2">
       <input type="text" class="form-elementNameInput" aria-describedby="inputGroup-sizing-sm"  value="text2"></input>
       </div>
       <div class="col-xs-2">
        <button class="btn btn-primary" id="btn_sel">
             <i class="fa fa-home"></i>
             <span style="width:3em;">
              </span>Select Type
            </button>
       </div>
     </div>
  </div>
 <li>
</ol>

<div class="col-xs-1">
 <button class="btn btn-primary" onClick="readInputText()">read text</button>
</div>

【问题讨论】：

标签： jquery

【解决方案1】：

您的 jQuery 不工作的原因是因为您使用的是 .first()，而您应该使用 .find()

.first() 将始终返回调用它的集合中的第一个元素 - 它不带参数。

// This will select the first element from $(this) - not $('.form-elementNameInput')
$(this).first('.form-elementNameInput').text();

.find() 将搜索调用它的集合的后代，并返回任何匹配的元素

// This will find the .form-elementNameInput element, and then find the first()
$(this).find('.form-elementNameInput').first();

另外，您正在使用 .text() 尝试返回您的选择中的文本 - 如果元素是 input、select 或 textarea，您应该使用 .val()

function readInputText() {
  $('li.liClass>div.containerClass').each(function() {
    let elementText = $(this).find("input.form-elementNameInput").first().val();
    console.log("#" + elementText + "#");
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ol>
  <li class="liClass">
    <div class="containerClass">
      <input type="hidden" id="typeSave" name="typeSave" value="" />
      <div class="form-group row">
        <div class="col-xs-2">
          <input type="text" class="form-elementNameInput" aria-describedby="inputGroup-sizing-sm" value="text1"></input>
        </div>
        <div class="col-xs-2">
          <button class="btn btn-primary" id="btn_sel">
             <i class="fa fa-home"></i>
             <span style="width:3em;">
              </span>Select Type
            </button>
        </div>
      </div>
    </div>
    <li>
      <li class="liClass">
        <div class="containerClass">
          <input type="hidden" id="typeSave" name="typeSave" value="" />
          <div class="form-group row">

            <div class="col-xs-2">
              <input type="text" class="form-elementNameInput" aria-describedby="inputGroup-sizing-sm" value="text2"></input>
            </div>
            <div class="col-xs-2">
              <button class="btn btn-primary" id="btn_sel">
             <i class="fa fa-home"></i>
             <span style="width:3em;">
              </span>Select Type
            </button>
            </div>
          </div>
        </div>
        <li>
</ol>

<div class="col-xs-1">
  <button class="btn btn-primary" onClick="readInputText()">read text</button>
</div>

【讨论】：

谢谢您，它的工作正常我无法接受，我仍然不明白为什么 first 不能解决这个问题... $(this).first("");
我添加了一个简短的解释，以及文档的附加链接

【解决方案2】：

我认为你想使用 find() 而不是 first()

elementText = $(this).find("input.form-elementNameInput:text").val();

function readInputText(){
  var elementText;
  $('li.liClass>div.containerClass').each(function(){				 
   elementText = $(this).find("input.form-elementNameInput:text").val();
   console.log("#" + elementText + "#");
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ol>
 <li class="liClass">
  <div class="containerClass">
    <input type="hidden" id="typeSave" name="typeSave" value="" />
     <div class="form-group row">
              <div class="col-xs-2">
       <input type="text" class="form-elementNameInput" aria-describedby="inputGroup-sizing-sm" value="text1"></input>
       </div>
       <div class="col-xs-2">
        <button class="btn btn-primary" id="btn_sel">
             <i class="fa fa-home"></i>
             <span style="width:3em;">
              </span>Select Type
            </button>
       </div>
     </div>
  </div>
 <li>
   <li class="liClass">
  <div class="containerClass">
    <input type="hidden" id="typeSave" name="typeSave" value="" />
     <div class="form-group row">

              <div class="col-xs-2">
       <input type="text" class="form-elementNameInput" aria-describedby="inputGroup-sizing-sm"  value="text2"></input>
       </div>
       <div class="col-xs-2">
        <button class="btn btn-primary" id="btn_sel">
             <i class="fa fa-home"></i>
             <span style="width:3em;">
              </span>Select Type
            </button>
       </div>
     </div>
  </div>
 <li>
</ol>

<div class="col-xs-1">
 <button class="btn btn-primary" onClick="readInputText()">read text</button>
</div>

【讨论】：