选择查询中的所有 class

Question

好吧，现在我正在做类似的事情来查找具有相同 class 名称的所有文本框值。

    function generalBottom(anchor) {
     var sends = $('input[data-name^="noValues"]').map(function(){
      $(this).attr('value',$(this).val());
       return $(this).val();
     }).get();
    }

我在单击提交按钮时调用此函数，例如 generalBottom(this) 根据我的要求，我有类似的东西当我单击 User 的提交按钮时，我调用了一个将 this 作为参数传递的通用函数，但上面的代码也为我提供了 client 的文本值 ["perfect", "hyperjack", "julie", "annoying", "junction", "convulated"]，这是不希望的，我只想 ["annoying", "junction", "convulated"] 使用我的锚参数。如何通过我的 this 参数执行此操作，我想使用 children()、parent() 遍历我的标签，但我不知道用户添加了多少字段，因为它是动态的，用户可以添加为许多值（文本框）。

我试过了

1) $(anchor).find('.rightAbsNo')

2) $(anchor).find('input[data-name^="noValues"]')

3) $(anchor).find('.rightAbsNo').map(function () { console.log($(this).find('. showNoButton')); })

None 这对我有用。

我的html有点像这样，代码

  <div id="attach0" class="leftbottomno">
  <div style="overflow: hidden" class="leftbottomAbsolute" id="">   
  <form> 
  <span class="absno"><input type="text" required="" 
  id="absdelete" data-inputclass="leftbottomAbsoluteNo_class"     
  value="" class="leftbottomabsolutenotest keys" data-value="" 
  style="margin-bottom:4px; color: #1c1c1c;"> </span>  
  <a onclick="addAbsoluteValues(this);" style="margin-left: 50px"> 
  <i class="fa fa-plus-circle color-blue-grey-lighter"></i> </a>  
  </form> 

  <a onclick="deleteAbsoluteEmpty(this);> </a><br> 

  <div class="rightAbsNo" id="yesValueattach"> 
  <div class="rightAbsNoValue"> 
  <input type="text" id="nonattach" placeholder="values" 
  data-name="noValues" data-inputclass="absYes_class"  value="annoying"   
  class="showNoButton showActivity value" data-value=""> 
  <button type="button" onclick="generalBottom(this);">
  <i class="glyphicon glyphicon-ok"></i></button> 
  </div>
  </div>

  <div class="rightAbsNo" id="yesValueattach"> 
  <div class="rightAbsNoValue" id=""> <input type="text" 
  data-name="noValues" data-inputclass="absYes_class" subattribute="" 
  value="" class="showNoButton showActivity value" data-value=""> 
  <button type="button" onclick="generalBottom(this);">

  <i class="glyphicon glyphicon-ok"></i></button> 
  </div>
  </div>

  <div class="rightAbsNo" id="yesValueattach"> 
  <div class="rightAbsNoValue" id=""> 
  <input type="text" data-name="noValues" 
  data-inputclass="absYes_class" placeholder="values" subattribute="" 
  value="junction" class="showNoButton showActivity value" 
  data-value="" > 
  <button type="button" style="display: none;"    
  onclick="generalBottom(this);">
  <i class="glyphicon glyphicon-ok"></i>
  </button> 
  </div>
 </div>
 </div>
 </div>

Answer 1

首先，您需要为组定义一个容器，例如：

<div class="container">input groups</div>
<div class="container">input groups</div>

并将 <button type='submit'> 更改为 <button type='button'> 以防止提交表单。

然后将您的函数更改为：

function generalBottom(anchor) {
    var all_inputs = $(anchor).parent(".container").find("input");
    var input = $(anchor).siblings('input').first();
    all_inputs.each(function(){
        $(this).val(input.val());
    });
}

Answer 2

这里是Jsfiddle

首先$(anchor).siblings(input)找到输入

然后遍历第一步中的每个元素，return它们的值

    function generalBottom(anchor) {
        var input = 'input[data-name^="noValues"]'
        var values = $.map($(anchor).siblings(input), (elemnt, index)=>{
            return elemnt.value
        })
        $('#shows').val(values.join())
    }

    $('button').on('click',function(){
        generalBottom(this)
    })

希望这对您有所帮助

选择查询中的所有 class

selecting all class within this in query

html

javascript

jquery

jquery-ui

jquery-plugins