如何在生成动态 html 时在 Jquery Clone 中设置值答案

【问题标题】：How to set value in Jquery Clone while generating dynamic html如何在生成动态 html 时在 Jquery Clone 中设置值
【发布时间】：2016-11-22 06:13:59
【问题描述】：

我正在使用克隆在单击按钮时生成动态 HTML，以下是我的 HTML。

<input id="AddPhoneType" onclick="setEmailValues()" value="Gen Email"  type="button">

<div style="margin-top: 10px;" class="ExtAddEmailTemplate" id="ExtAddEmailTemplate">

<input name="RemoveEmail"  class="RemovePhoneBtn" value="-" id="RemoveEmail" type="button">
<input type="text" name="txtExtEmail" class="ExtEmailClass" value=""  placeholder="Email" /></div>

<div id="EmailContainer">  </div>

下面是脚本

$(document).ready(function () {
$('#AddExtEmail').click(function () {
                $('<div/>', {
                    'class': 'ExtAddEmail', html: GetHtmlForEmail()
                }).hide().appendTo('#EmailContainer').slideDown('slow');
            });
    });

    function setEmailValues() {

               $('<div/>', {
                    'class': 'ExtAddEmail', html: GetHtmlForEmail()
                }).hide().appendTo('#EmailContainer').slideDown('slow');
        }

function GetHtmlForEmail()
        {
            var len = $('.ExtAddEmail').length;

           var emailValue = 'oner@one.com,twor@two.com';
            var emaiArray = emailValue.split(","); 


            var $html = $('.ExtAddEmailTemplate').clone();
            $html.find('[name=txtExtEmail]')[0].name = "txtExtEmail" + len;


            return $html.html();
        }

现在点击按钮，我需要生成 2 个文本框，让我们说各自的电子邮件 ID，让我们说“oner@one.com”、“twor@two.com”

现在我的问题是我无法在生成 HTML 时设置值我试过关注

$html.find('[type=text]')[0].val('oner@one.com'); 尝试使用 class 、 text 等查找，但无法设置值。

我还需要设置 dropdown 的值，假设如果我可以设置文本框的值，那么它也可以为 dropdown 做。

在生成 HTML 后我可以做到这一点

 $('#EmailContainer .ExtEmailClass').each(function () {
       this.value = 'oner@one.com';
   });

但我认为如果我们可以在生成 HTML 时设置值是最合适的解决方案。

谢谢

【问题讨论】：

标签： javascript jquery html jquery-plugins clone

【解决方案1】：

您可以使用下面的代码，它运行良好，

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Tring Reset</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<input id="AddPhoneType" onclick="setEmailValues()" value="Gen Email"  type="button">

<div style="margin-top: 10px;" class="ExtAddEmailTemplate" id="ExtAddEmailTemplate">

<input name="RemoveEmail"  class="RemovePhoneBtn" value="-" id="RemoveEmail" type="button">
<input type="text" name="txtExtEmail" class="ExtEmailClass" placeholder="Email" /></div>
<input type="button" id="AddExtEmail" value="+"/>
<div id="EmailContainer">  </div>	
<script>
$(document).ready(function () {
	$('#AddExtEmail').click(function () {
	                $('<div/>', {
	                    'class': 'ExtAddEmail', html: GetHtmlForEmail()
	                }).hide().appendTo('#EmailContainer').slideDown('slow');
	            });
	    });

	    function setEmailValues() {

	               $('<div/>', {
	                    'class': 'ExtAddEmail', html: GetHtmlForEmail()
	                }).hide().appendTo('#EmailContainer').slideDown('slow');
	        }

	function GetHtmlForEmail()
	        {
	            var len = $('.ExtAddEmail').length;

	           var emailValue = 'oner@one.com,twor@two.com';
	            var emaiArray = emailValue.split(","); 


	            var $tryiy = $('.ExtAddEmailTemplate').clone();
	            $tryiy.find('[name=txtExtEmail]')[0].name = "txtExtEmail" + len;
	            $tryiy.find('[name=txtExtEmail'+len+']').attr("value",emaiArray[0]);

	            return $tryiy.html();
	        }
</script>
</body>
</html>

我已经使用 jquery 的元素的 attr("value",emaiArray[0]); 属性设置了值，它工作正常

【讨论】：

感谢您的回答，能否请您也建议选择 dropdow 的解决方案 :)，我正在尝试，谢谢 > $html.find('[id=' + len + ']')
这部分是否被传递到 id 属性中？