Скопируйте ID из вложенного элемента в его верхний родительский элемент, используя jQuery - PullRequest
Новая
       47

Скопируйте ID из вложенного элемента в его верхний родительский элемент, используя jQuery

0 голосов
/ 11 апреля 2019

В моем 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.Таким образом, есть 20x уникальных <label> идентификаторов.Так что мне было интересно, как можно скопировать идентификатор label в его верхний родительский `form-control 'с помощью jQuery, поэтому результат будет для первого: 

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

Обновление решения
Мой первоначальный запрос на добавление того же id из <label> в верхний родительский элемент не имеет смысла в HTML.Таким образом, принятый ответ в порядке, но не идеален.Чтобы сделать HTML более корректным, я выбрал имя <label id= в качестве дополнительного класса для верхнего родителя.Таким образом, окончательное решение будет таким: 
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>

Ответы [ 2 ]

1 голос
/ 11 апреля 2019

ОБНОВЛЕНИЕ ОТВЕТА: - Скопировать идентификатор метки в класс div

Это предпочтительный способ сделать это, чтобы избежать конфликтующих идентификаторов 

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

OLDОТВЕТ - копирование идентификатора из метки в div.

Вы можете скопировать атрибут id каждой вложенной метки, просматривая все div с классом управления формой.

$(".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>

Это зациклит каждый div с классом .form-controls и изменит его идентификатор на идентификатор потомка метки.

Имейте в виду, что это не лучшая практика, поскольку идентификаторы должны быть уникальными.Попробуйте вместо этого использовать класс.

Вы также можете добавить следующий код в конце цикла, чтобы удалить идентификатор метки после их копирования. 

$(this).find('label').removeAttr("id");
0 голосов
/ 11 апреля 2019

Вот, пожалуйста!Я вставил код ниже, пожалуйста, посмотрите. 

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>
...