WedX - журнал о программировании и компьютерных науках

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

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

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

Что я пытаюсь сделать, так это создать div и присвоить ему некоторые атрибуты, а затем добавить этот div ко всем элементам ‹ li >, которые находятся в последнем узле моего неупорядоченного списка. И последнее, но самое важное, я хочу получить значение атрибута с именем «p_node» из добавляемого ‹ li > и вставить его как часть идентификатора только что созданного 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);
});

  • @Ronedog Stack Overflow работает не так, как другие сайты. Задающий вопрос не должен публиковать дополнительные вопросы ниже, только здесь. Если у вас есть комментарии по поводу определенного ответа ниже, спросите их в поле комментариев под ответом, на который вы ссылаетесь. Я переместил ваш пост в ваш вопрос. 26.03.2010

Ответы:


1

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

$("#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" />')
26.03.2010
  • Я должен быть идиотом... но я не могу это исправить... см. мой другой пост с большим количеством примеров кода. Спасибо. 26.03.2010
  • Мэтт, забудь, что я сказал... хотя это все еще проблема, я не мог понять, почему вывод php все испортил. Итак, я взял «скрипт», который был помещен в строку php, переместил весь код jquery/javascript в свой файл .js и напрямую вызвал функцию javascript... и теперь это работает. Надеюсь, это имеет смысл для всех, кто придет. Итак, в конце концов, ваше решение было тем, что мне было нужно... спасибо. Мне просто нужно было поместить его в файл .js и запустить таким образом. 26.03.2010
  • Мех, ваш вывод PHP должен работать, если вы используете self.after( \'<div id="\' + self.attr(\'p_node\') + \'_p_cont_div" class="property_position">Something</div> \' ); 26.03.2010

  • 2

    Вы хотите добавить другой элемент к каждому 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> с функцией, которая проверяет родительский атрибут.

    25.03.2010
  • Спасибо за помощь. Но по какой-то причине я не мог заставить это работать. Спасибо за вашу помощь в любом случае. 26.03.2010
  • класс является зарезервированным словом. попробуйте className или кавычки вокруг класса. 26.03.2010

  • 3

    Я пошел за:

    $('selector').each(function () {
        var self = $(this);
    
        self.after('<div id="' + self.attr('p_node') + '_p_cont_div" class="property_position" />');
    });
    

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

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

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

    25.03.2010
  • +1 - Я с вами, это то, что я придумал, просто я не знал, как именно он хотел, чтобы это было реализовано. 26.03.2010
  • Эта реализация великолепна и работает, за одним исключением. Div вставляется правильно, но есть проблема с атрибутом id. Я пробовал различные контатенации строк, но ничего не понял. Я уверен, что это что-то простое. если я сделаю это: p_node = self.attr(\'p_node\'); self.after(‹div id=p_node class=\'property_position\' /›); Я получаю следующее: ‹div class=property_position id=p_node›‹/div› Это не позволяет запускать jquery: self.after(‹div id=\' + p_node +\' class=\'property_position\' /›) ; 26.03.2010
  • Я также пробовал это: self.after(‹div class=\'property_position\' /›); $(li›div).attr(id,p_node); почему это не работает? Это не имеет смысла ... это потому, что на данный момент div еще не создан в доме? 26.03.2010
  • Можете ли вы снова опубликовать все, что вы используете? Он отлично работает для меня. 26.03.2010
  • Новые материалы

    Я хотел выучить язык программирования MVC4, но не мог выучить его раньше, потому что это выглядит сложно…
    Просто начните и учитесь самостоятельно Я хотел выучить язык программирования MVC4, но не мог выучить его раньше, потому что он кажется мне сложным, и я бросил его. Это в основном инструмент..

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

    Объяснение документов 02: BERT
    BERT представил двухступенчатую структуру обучения: предварительное обучение и тонкая настройка. Во время предварительного обучения модель обучается на неразмеченных данных с помощью..

    Как проанализировать работу вашего классификатора?
    Не всегда просто знать, какие показатели использовать С развитием глубокого обучения все больше и больше людей учатся обучать свой первый классификатор. Но как только вы закончите..

    Работа с цепями Маркова, часть 4 (Машинное обучение)
    Нелинейные цепи Маркова с агрегатором и их приложения (arXiv) Автор : Бар Лайт Аннотация: Изучаются свойства подкласса случайных процессов, называемых дискретными нелинейными цепями Маркова..

    Crazy Laravel Livewire упростил мне создание электронной коммерции (панель администратора и API) [Часть 3]
    Как вы сегодня, ребята? В этой части мы создадим CRUD для данных о продукте. Думаю, в этой части я не буду слишком много делиться теорией, но чаще буду делиться своим кодом. Потому что..

    Использование машинного обучения и Python для классификации 1000 сезонов новичков MLB Hitter
    Чему может научиться машина, глядя на сезоны новичков 1000 игроков MLB? Это то, что исследует это приложение. В этом процессе мы будем использовать неконтролируемое обучение, чтобы..


    Для любых предложений по сайту: [email protected]