Jquery查找匹配数组的ID

Question

好的，我正在使用 map.get() 将选择的选项值存储在数组中

myArray = $("option:selected").map(function(){ return this.value }).get().join(" ");  

我有一些 div 的 ID 名称与存储在数组中的选择选项值相同

myArray = [ one two three ];

我想将 [一二三] 作为类应用到 div.box 并找到 ID 名称与 myArray [div#one div#two div#three] 相同的 Div 并获取所有输入：选中。

 <div id="one">   inputs with :checked </div>
 <div id="two">   inputs with :checked </div>
 <div id="three"> inputs with :checked </div>
 <div id="four">  inputs with :checked </div> 

如何从 ID 为 [一二三] 的 Div 中获取 :checked 项目。

我不确定如何找到与每个数组元素匹配的 ID 提前感谢您的帮助和感谢 :)

var selectedOptions = $(".select-field option:selected").map(function() {
  return this.value
}).get().join(" ");


//add selected option value as CLASS to .box
$('.box').addClass(selectedOptions);


// check if selected option stored in array match any div ID and get it's checked values

$.each(selectedOptions, function(index, value) {
  $('#' + value + ' input:checked').each(function() {
    var checked = $(this);
  });
});


//result

$("p.select").append(selectedOptions);
$("p.checked").append(checked);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select class="select-field">
  <option value="one">option one</option>
  <option value="two">option two</option>
  <option value="three">option three</option>
</select>

<select class="select-field">
  <option value="four">option four</option>
  <option value="five">option five</option>
  <option value="six">option six</option>
</select>


<div id="one">
  <p>Option one</p>
  <fieldset>
    <input type="radio" name="div1" value="left">
    <label for="left">Left</label>
    <input type="radio" name="div1" value="right" checked>
    <label for="right">Right</label>
  </fieldset>
</div>

<div id="two">
  <p>Option two</p>
  <fieldset>
    <input type="radio" name="div2" value="left" checked>
    <label for="left">Left</label>
    <input type="radio" name="div2" value="center">
    <label for="center">Center</label>
  </fieldset>
</div>

<div id="three">
  <p>Option three</p>
  <fieldset>
    <input type="radio" name="div3" value="right">
    <label for="right">Right</label>
    <input type="radio" name="div3" value="center" checked>
    <label for="center">Center</label>
  </fieldset>
</div>

<div id="four">
  <p>Option four</p>
  <fieldset>
    <input type="radio" name="div4" value="right">
    <label for="right">Right</label>
    <input type="radio" name="div4" value="center" checked>
    <label for="center">Center</label>
  </fieldset>
</div>

<div id="five">
  <p>Option five</p>
  <fieldset>
    <input type="radio" name="div5" value="left">
    <label for="left">Left</label>
    <input type="radio" name="div5" value="center" checked>
    <label for="center">Center</label>
  </fieldset>
</div>

<br />

<h4>Results</h4>
<div style="border:2px solid" class="box">Add "option one" and "option two" value as Class to this div .box example class="one four"</div>

<p class="select">Selected Options are :</p>

<p class="checked">Checked Options are :</p>

Answer 1

您必须使用 each 遍历数组，然后您必须找到检查的值。

 $.each(myArray, function( index, value ) {
     $('#'+value+' input:checked').each(function() {
         console.log($(this));
     });
 });

这个例子可能会对你有所帮助。

Answer 2

由于您在返回的数组中使用了.join()，因此它已被转换为字符串。我建议你不要用空格.join(" ")。

相反，您可以返回一个带有# 附加值的字符串，并且只返回一个不带空格的.join("')，它将输出一个逗号分隔的哈希标记值字符串。

你可以这样做：

var myArray = $("option:selected").map(function(){ 
    return '#'+this.value; 
}).get().join(","); 
// would output #one, #two, #three

现在你可以创建一个 var myArray 的选择器：

$(myArray).each(function (){
    var val = $(this).find(':ckecked').val();
    console.log(val);
});

Answer 3

试试这个来创建数组

var myArray = [];
$("option:selected").each(function(){
    var ThisIt = $(this);
    myArray.push($.trim(ThisIt.val()));
});

然后使用

$.each(myArray , function(i){
  var Id = $.trim(myArray[i]);
  if($('#'+Id).length > 0){
      $('#'+Id +' input[type="checkbox"]:checked').each(function(){
          alert($(this).val());
      });
  }
});