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

Posted 2023-02-18

【中文标题】使用jQuery将具有特定类的每个div的名称保存到变量中

【英文标题】：Using jQuery to save the name of each div that has a specific class to a variable

【发布时间】：2013-10-18 20:58:49

【问题描述】：

我需要遍历一个 div 列表。如果该列表中的 div 具有“活动”的类名，那么我需要将特定 div 的 <p></p> 标记的内容保存到变量中。然后我需要将该变量的内容放在表单上隐藏输入元素的值中。例如，这里是一些 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);

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

【问题讨论】：

当人们不创作小提琴时，这让我很难过

$('#list').val(userSelection());你忘了执行函数

【参考方案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());

【讨论】：

什么是get()？将数组转换为字符串？

您先生，是个巫师。感谢您的帮助。

@Dvir map() 返回一个 jquery 对象。 get() 返回一个包含集合内容的实际数组。

【参考方案2】：

Jason P 的替代方案是修改返回结果数组所需的内容，因为您将函数调用到具有多个结果的变量中：

var userSelection = function() 
    var output = [];
    $('.names div').each(function () 
        if($(this).hasClass('active')) 
            output.push( $(this).text().trim() );
        
    );
    return output;
;

See JSFiddle.

【参考方案3】：

工作小提琴：http://jsbin.com/uQEJIkU/3/edit

$(document).ready(function()   
  values = []  
  $("div.active > p").each( function()   
    values.push($(this).text())    
  )    
)