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

Question

我正在尝试读取类 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>

Answer 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() 尝试返回 select 中的文本 - 如果该元素是 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>