Question

在我的HTML中，由插件创建的情况如下：

[...]
[main] WARN  com.zaxxer.hikari.util.DriverDataSource - Registered driver with driverClassName=com.mysql.jdbc.Driver was not found, trying direct instantiation.
[main] ERROR com.zaxxer.hikari.pool.HikariPool - HikariPool-1 - Exception during pool initialization.
com.mysql.cj.jdbc.exceptions.CommunicationsException: Communications link failure

The last packet sent successfully to the server was 0 milliseconds ago. The driver has not received any packets from the server.
    at com.mysql.cj.jdbc.exceptions.SQLError.createCommunicationsException(SQLError.java:174)
    at com.mysql.cj.jdbc.exceptions.SQLExceptionsMapping.translateException(SQLExceptionsMapping.java:64)
    at com.mysql.cj.jdbc.ConnectionImpl.createNewIO(ConnectionImpl.java:835)
    [...]
    at org.flywaydb.core.internal.database.DatabaseFactory.createDatabase(DatabaseFactory.java:72)
    at org.flywaydb.core.Flyway.execute(Flyway.java:1670)
    at org.flywaydb.core.Flyway.migrate(Flyway.java:1356)
    [...]
Caused by: java.net.ConnectException: Connection refused (Connection refused)
    at java.net.PlainSocketImpl.socketConnect(Native Method)
    at java.net.AbstractPlainSocketImpl.doConnect(AbstractPlainSocketImpl.java:350
    [...]

上面的HTML大约有20个重复元素，因此我试图将各个主要的父对象称为<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>，以便添加唯一的CSS或jQuery。该HTML中唯一的唯一标识位于嵌套的form-controls上。因此，有20个唯一的label ID。因此，我想知道如何使用jQuery将<label> id复制到其顶级父“ form-controls”，因此结果将是第一个：

label

更新解决方案
我最初的要求是将

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

中的相同id添加到顶级父级中，这是HTML的明智之举。因此，可以接受的答案是可以的，但并不理想。为了使HTML更有效，我选择将<label>名称作为顶级父级的附加类。所以最终的解决方案是：

<label id=

和HTML结果：

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

Answer 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);
});

老答案-将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");

Answer 2

您在这里！我在下面粘贴了代码，请看一看。

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>

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

2 个答案: