javascript - 使用 jQuery 将具有特定类的每个 div 的名称保存到变量

Question

我需要遍历 div 列表。如果该列表中的 div 具有类名“active”，那么我需要保存 <p></p> 的内容特定 div 的标记到变量。然后我需要将该变量的内容放入表单上隐藏输入元素的值中。例如，这里是一些示例 HTML:

<div class="names">
  <div class="one active">
    <p>A</p>
  </div>
  <div class="two active">
    <p>B</p>
  </div>
  <div class="three">
    <p>C</p>
  </div>
  <div class="four active">
    <p>D</p>
  </div>
  <div class="five">
    <p>E</p>
  </div>
  <div class="six active">
    <p>F</p>
  </div>
</div>

<form action="form.php" method="POST">
  <input type="hidden" name="list" id="list" value="">
</form>

由于其中四个 div 包含“事件”类，我需要将每个段落标记中的内容保存到一个变量中，以便插入到隐藏字段的值中。在此示例中，字段的值将是 A、B、D、F。

我想过做这样的事情:

var userSelection = function() {
    $('.names div').each(function () {
        if($(this).hasClass('active')) {
            return $(this).text();
        }
    });
};

$('#list').val(userSelection);

首先，该代码不起作用，我什至不确定这是否是解决我问题的最佳方法。其次，如果有人对如何完成我的需要有更好的想法，我很乐意听到。

Answer 1

我会使用 map() 来获取文本数组:

var textArr = $('.names div.active').map(function() {
    return $(this).text();
}).get();

从那里，您可以使用 join() 获取可以写入 DOM 的字符串:

var textString = textArr.join(', ');

完整的压缩代码:

var userSelection = function() {
    return $('.names div.active').map(function() {
        return $(this).text();
    }).get().join(', ');
};

$('#list').val(userSelection());