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

标签： jquery

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()尝试返回选择中的文本 - 如果元素是 a 或input，您应该使用selecttextarea.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>