简体   繁体   English

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

[英]Using jQuery to save the name of each div that has a specific class to a variable

I need to loop through a list of divs. 我需要遍历一个div列表。 If a div in that list has the class name of "active", than I need to save the contents of the <p></p> tag of the specific div to a variable. 如果该列表中的div具有类名“active”,则需要将特定div的<p></p>标记的内容保存到变量中。 I then need to place the contents of that variable in a the value of a hidden input element on a form. 然后,我需要将该变量的内容放在表单上隐藏的输入元素的值中。 For example, here is some example HTML: 例如,这是一些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>

Since four of the divs contain the "active" class, I need to save the content that is in each paragraph tag to a variable to be inserted into the value of the hidden field. 由于四个div包含“活动”类,我需要将每个段落标记中的内容保存到要插入隐藏字段值的变量中。 In this example, the value of the field would be A, B, D, F. 在此示例中,字段的值将为A,B,D,F。

I thought about doing something like this: 我想过做这样的事情:

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

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

First off, that code doesn't work and I am also not even sure if that's the best way to go about solving my problem. 首先,该代码不起作用,我甚至不确定这是否是解决问题的最佳方法。 Second, if anyone has a better idea of how to accomplish what I need, I would love to hear it. 其次,如果有人对如何完成我需要的东西有了更好的了解,我很乐意听到它。

I would use map() to get an array of the text: 我会使用map()来获取文本数组:

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

From there, you could use join() to get a string you could write to the DOM: 从那里,您可以使用join()来获取可以写入DOM的字符串:

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

Full, compressed code: 完整的压缩代码:

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

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

Alternative to Jason P's answer is to modify what you've got to return an array of the results, as you're calling a function into a variable that has multiple results: 替代Jason P的答案是修改你必须返回结果数组的内容,因为你将一个函数调用到一个具有多个结果的变量中:

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

See JSFiddle. 见JSFiddle。

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

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM