jQuery: как создать новый div, назначить некоторые атрибуты и создать идентификатор из атрибутов некоторых других элементов?

Question

jQuery : как создать новый div, назначить некоторые атрибуты и создать идентификатор из атрибутов некоторых других элементов?

Как мне это сделать. То, что я попробовал ниже, не работает, и я не уверен, как заставить это работать.

Я пытаюсь создать div и присвоить ему некоторые атрибуты, а затем добавить div ко всем элементам

, которые находятся в последнем узле моего неупорядоченного списка. И наконец, но самое главное, я хочу получить значение атрибута p_node из добавляемого и вставить его как часть идентификатора недавно созданного div.

Вот мой текущий код jQuery:

$('<div />,{id:"'+ $("#nav li:not(:has(li))").attr("p_node").val() +'_p_cont_div", class:"property_position"}').appendTo("#nav li:not(:has(li))");

Вот HTML-код перед созданием div:

<ul>
    <li p_node="98" class="page_name">Category A</li>
</ul>
<ul>
    <li p_node="99" class="page_name">Category B</li>
</ul>

Вот как я хочу выглядеть после нового div создания:

<ul>
    <li p_node="98" class="page_name">Category A</li>
    <div id="98_p_cont_div" class="property_position"></div>
</ul>
<ul>
    <li p_node="99" class="page_name">Category B</li>
    <div id="99_p_cont_div" class="property_position"></div>
</ul>

Обновление

Это работает:

$("#nav li:not(:has(li))").each(function () {
    var self = $(this);
    p_node = self.attr(\'p_node\');
    self.after("<div  class=\'property_position\' />");
});

Это не работает:

$("#nav li:not(:has(li))").each(function () {
    var self = $(this);
    p_node = self.attr(\'p_node\');
    self.after("<div id=\'" + p_node + "\' class=\'property_position\' />");
});

Это также не работает:

$("#nav li:not(:has(li))").each(function () {
    var self = $(this);
    p_node = self.attr(\'p_node\');
    self.after("<div class=\'property_position\' />");
    $("li>div").attr("id",p_node);
});

Answer 1

Я выбрал:

$('selector').each(function () {
    var self = $(this);

    self.after('<div id="' + self.attr('p_node') + '_p_cont_div" class="property_position" />');
});

Я не мог понять, над какими элементами вы хотите, чтобы это было выполнено.

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

(Селектор должен соответствовать LI, но код может быть адаптирован для соответствия чему-то другому.)

Answer 2

Это синтаксическая ошибка, попробуйте:

$("#nav li:not(:has(li))").each(function () {
    var self = $(this);
    p_node = self.attr('p_node');
    self.after("<div id='" + p_node + "' class='property_position' />");
});

У этого есть синтаксическая ошибка и неправильный селектор:

$("#nav li:not(:has(li))").each(function () {
    var self = $(this);
    p_node = self.attr('p_node');
    self.after("<div class='property_position' />");
    self.next().attr('id', p_node);
});

Но вам все еще не хватает части "_p_cont_div" идентификатора, так как насчет:

$("#nav li:not(:has(li))").each(function () {
    var self = $(this);
    p_node = self.attr('p_node');
    self.after("<div id='" + p_node + "_p_cont_div' class='property_position' />");
});

Но затем мы возвращаемся к тому, что я первоначально написал:

self.after('<div id="' + self.attr('p_node') + '_p_cont_div" class="property_position" />')

Answer 3

Вы хотите добавить разные элементы к каждому li.

Лучший способ сделать это - вызвать append с функцией генератора, например: (Не проверено)

$("#nav li:not(:has(li))").append(function(index, html) { 
    return $('<div />', {
        id:    $(this).attr("p_node").val() + '_p_cont_div', 
        class: "property_position"
    });
});

Кроме того, вы можете сохранить текущий код, а затем вызвать attr на вновь вставленных <div> s с функцией, которая проверяет родительский атрибут.