在查询中选择此中的所有类

时间:2018-03-29 12:01:20

标签: javascript jquery html jquery-ui jquery-plugins

现在我正在做这样的事情来查找具有相同类名的所有文本框值。

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

我在点击generalBottom(this)之类的提交按钮时调用此功能 而且根据我的要求,我有类似的东西   enter image description here 当我点击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')); })

这些都不适合我。

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

enter image description here

2 个答案:

答案 0 :(得分: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());
    });
}

答案 1 :(得分:1)

此处Jsfiddle

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

然后从第一步开始遍历每个元素并返回它们的值

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

希望这会有所帮助