使用jQuery将ID从嵌套元素复制到其顶级父级

问题描述 投票：-1回答：2

我在插件创建的HTML中有以下情况：

<div class="form-controls">
    <div class="form__field ">
        <div class="preferences__notification">
            <label id="user_comment" class="form-label"></label>
        </div>
    </div>
</div>
<div class="form-controls">
    <div class="form__field ">
        <div class="preferences__notification">
            <label id="wall_post" class="form-label"></label>
        </div>
    </div>
</div>

上面的HTML大约有20个重复元素，我试图调用个别主要的父母form-controls，所以我可以添加独特的CSS或jQuery。此HTML中唯一唯一的标识位于嵌套的label上。所以有20倍独特的<label> ID。所以我想知道如何用jQuery将label id复制到它的顶级父`form-controls'，所以结果将是第一个：

<div id="user_comment" class="form-controls">etc</div>

Update Solution
My initial request to add the same id from the <label> into the top parent is HTML wise not clever to do. So the accepted answer is okay, but not ideal. To make it more HTML valid, I have chosen to take the <label id= name as an additional class for the top parent. So ultimate solution will be this: 
jQuery(".form-controls").each(function() {
    var label_id_name = jQuery(this).find('label').attr('id');
    jQuery(this).addClass(label_id_name);
});

和HTML结果：

<div class="form-controls user_comment">
    <div class="form__field ">
        <div class="preferences__notification">
            <label id="user_comment" class="form-label"></label>
        </div>
    </div>
</div>
<div class="form-controls wall_post">
    <div class="form__field ">
        <div class="preferences__notification">
            <label id="wall_post" class="form-label"></label>
        </div>
    </div>
</div>
jquery html label id
2个回答
1
投票

答案更新： - 将标签ID复制到div类

这是实现此目的的首选方法，以避免ID'冲突

jQuery(".form-controls").each(function() {
    var label_id_name = jQuery(this).find('label').attr('id');
    jQuery(this).addClass(label_id_name);
});

OLD ANSWER - 将ID从标签复制到div。

您可以通过使用form-control类循环遍历所有div来复制每个嵌套标签的id属性。

$(".form-controls").each(function()
                        {

  var label_id = $(this).find('label').attr("id");
  $(this).attr("id", label_id);

});

在您的代码中，结果将是：

<div class="form-controls" id="user_comment">
    <div class="form__field ">
        <div class="preferences__notification">
            <label id="user_comment" class="form-label"></label>
        </div>
    </div>
</div>
<div class="form-controls" id="wall_post">
    <div class="form__field ">
        <div class="preferences__notification">
            <label id="wall_post" class="form-label"></label>
        </div>
    </div>
</div>

这将使用.form-controls类循环每个div，并将其ID更改为其标签后代ID。

请记住，这不是最好的做法，因为id是唯一的。考虑使用类来代替。

您还可以在循环结束时添加以下代码，以便在复制后删除标签的ID。

$(this).find('label').removeAttr("id");
0
投票

干得好！我在下面粘贴了代码，请看一下。

const addIDToParent = ele => {
    		for (var i = 0; i < ele.length; i++) {
    			let getId = $(ele[i]).find('label').attr('id');
    			$(ele[i]).attr('id', getId);
    		}
    	};
    	
    	addIDToParent($('.form-controls'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <div class="form-controls">
        <div class="form__field ">
            <div class="preferences__notification">
                <label id="user_comment" class="form-label">User Comment</label>
            </div>
        </div>
    </div>
    <div class="form-controls">
        <div class="form__field ">
            <div class="preferences__notification">
                <label id="wall_post" class="form-label">Wall Post</label>
            </div>
        </div>
    </div>
</body>

</html>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.