Question

我正在尝试将jQuery中克隆元素的属性值更改为新值，但不知怎的，我的脚本不起作用。请查看我尝试克隆的HTML代码。

            <div id="process_operands" class="process_input">
                <select name="process_operands">
                    <option name="PO" value="Process_Name">Process Name</option>
                    <option name="PO" value="Process_Path">Process Abspath</option>
                    <option name="PO" value="Process_Signature">Process Signature</option>
                    <option name="PO" value="Process_Acl">Process ACL</option>
                    <option name="PO" value="Process_Checksum">Process Checksum</option>
                    <option name="PO" value="Process_Type">Process Type</option>
                </select> &nbsp             
                <input type=text name="PO_value" maxlength="5000">
            </div>
            <div id="Padditionalselects"></div>
            <p class="add_PO">Add more</p>

我的JS代码

$(document).ready(function(){
//var counter = 0;
$(".add_PO").click(function(){
  //  var counter=counter+1;
        var selectclone = $("#process_operands").clone(true)
            .append($('<a class="delete" href="#">Remove</a>'))
            .appendTo("#Padditionalselects");           

        selectclone.find('select').attr('name', 'process_operands1');
        selectclone.find('input').attr('name', 'PO_value1');
    });

    $("body").on('click',".delete", function() {
        $(this).closest(".process_input").remove();
    }); 
    });

有人可以帮帮我吗？有没有更好的办法？

问题2：一旦我上面的代码工作，我想创建一个计数器分配为0的变量。每次，克隆发生，我希望我的“name”属性的值为process_operands1，process_operands2等。

我希望我的问题很明确。

Answer 1

您可能忘记将克隆元素分配给变量，以便操纵克隆元素。

$(document).ready(function(){
	
	// Cloned elements count
	var counter = 0;
	
	$(".add_PO").click(function(){
		
		// Increment the cloned element count
		counter++;
		
		// Clone the element and assign it to a variable
		var clone = $("#process_operands").clone(true)
			.append($('<a class="delete" href="#">Remove</a>'))
			.appendTo("#Padditionalselects");
		
		// Modify cloned element, using the counter variable
		clone.find('select').attr('name', 'process_operands'+counter);
		clone.find('input').attr('name', 'PO_value'+counter);
		
	});
	
	$("body").on('click',".delete", function() {
		$(this).closest(".process_input").remove();
		counter--; // Modify the counter
	});
	
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="process_operands" class="process_input">
	<select name="process_operands">
		<option name="PO" value="Process_Name">Process Name</option>
		<option name="PO" value="Process_Path">Process Abspath</option>
		<option name="PO" value="Process_Signature">Process Signature</option>
		<option name="PO" value="Process_Acl">Process ACL</option>
		<option name="PO" value="Process_Checksum">Process Checksum</option>
		<option name="PO" value="Process_Type">Process Type</option>
	</select> &nbsp
	<input type=text name="PO_value" maxlength="5000">
</div>
<div id="Padditionalselects"></div>
<p class="add_PO">Add more</p>

作为建议，最好将可用作阵列服务器端的名称应用于输入。您可以命名字段process_operands，而不是将process_operands[]命名为字段xsl:attribute，这样您就可以像我提到的那样将数据作为数组服务器端访问，并且您也可以跳过更改输入名称。

Answer 2

try this

$(document).ready(function(){
    var counter = 0;
    $(".add_PO").click(function(){
        counter=counter+1;
        var $clone = $("#process_operands").clone(true)
            .append($('<a class="delete" href="#">Remove</a>'))
            .attr("id","process_operands"+counter);           
        $clone.find('select').attr('name', 'process_operands'+counter);
        $clone.find('input').attr('name', 'PO_value1'+counter);
        $clone.appendTo($("#Padditionalselects"));
    });
    $("body").on('click',".delete", function() {
    $(this).closest(".process_input").remove();
    }); 
});

Answer 3

您可以按名称使用jquery示例：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="process_operands">
  <option name="PO" value="Process_Name">Process Name</option>
  <option name="PO" value="Process_Path">Process Abspath</option>
  <option name="PO" value="Process_Signature">Process Signature</option>
  <option name="PO" value="Process_Acl">Process ACL</option>
  <option name="PO" value="Process_Checksum">Process Checksum</option>
  <option name="PO" value="Process_Type">Process Type</option>
</select>
<script>
$("option[name='PO']").each(function(){
   $(this).attr('value', '1')
});
</script>

Link 在这种情况下，只为你可以设置css或其他attr的所有选项设置attr值，你可以使用一个选择器（name，id，css..etc ..） Look the doc Jquery Selector

如何使用jQuery更改多个克隆HTML元素的属性值？

3 个答案: