Как динамически создавать / добавлять элементы списка (ul, ol, li), используя манипуляции с JQuery DOM? - PullRequest
Новая
       17

Как динамически создавать / добавлять элементы списка (ul, ol, li), используя манипуляции с JQuery DOM?

3 голосов
/ 18 января 2011

Я программирую веб-страницу AJAX (используя IE 8) и мне нужно динамически создать список в jQuery на основе возвращенных данных.Позже я буду конвертировать список в jQuery accordian.

Я также пытаюсь научиться правильно использовать эти функции jQuery и цепочки.Я просто JQuery NOOB, но понимаю JavaScript.Я нашел хорошую статью о функциях jQuery dom: http://www.packtpub.com/article/jquery-1.4-dom-insertion-methods

Я хочу добавить как можно больше, используя функции jQuery dom и цепочки jQuery, не прибегая к исходному коду HTML с использованием текста.Я хочу использовать в основном .wrap(), .appendto(), .attr(), .text() и .parent().

. Я не думаю, что ".attr("class", "CC_CLASS"). - лучший способ добавитьclass.

Учитывая код HTML: 

<div id="outputdiv"></div>

Используйте функции dQ juuery, чтобы изменить его следующим образом: 

<div id="outputdiv"> 
 <ul id="JJ_ID"> 
  <li> AAA_text </li> 
  <li id="BB_ID"> BBB_text </li> 
  <li class="CC_CLASS"> CCC_text </li> 
  <li id="DD_ID">DDD_text<br/> 

    <ol id="EE_ID"> 
      <li> FFF_text </li> 
      <li id="GG_ID"> GGG_text </li> 
      <li class="HH_CLASS"> HHH_text </li> 
    </ol> 

  </li> 
 </ul> 
</div>

Некоторый код, который я понял (игнорируяпробелы в тексте). 

var aObj = $('<li></li>').text("AAA_text")
var bObj = $('<li></li>').attr("id", "BB_ID").text("BBB_text"); 
var cObj = $('<li></li>').attr("class", "CC_CLASS").text("CCC_text");
var dObj = $('<li></li>').attr("id", "DD_ID").text("DDD_text");
var fObj = $('<li></li>').text("FFF_text");
var gObj = $('<li></li>').attr("id", "GG_ID").text("GGG_text"); 
var hObj = $('<li></li>').attr("class", "HH_CLASS").text("HHH_text");

Как-то добавить (fObj + gObj + hObj) в eObj? 

var eObj = `*something*`.attr("id", "EE_ID").wrap(`*something*`);

Как-то добавить (aObj + bObj + cObj + dObj + eObj) в jObj? 

var jObj = `*something*`.attr("id", "JJ_ID").wrap(`*something*`);  
jObj.appendTo("#xmlOutputId")

Ответы [ 2 ]

7 голосов
/ 18 января 2011

Метод .append возвращает тот же объект контейнера, на котором вы его вызывали - используйте его для приятного объединения методов: 

var inner_list = $('<ol/>', {id: "EE_ID" })
    .append( $('<li/>', {text: "FFF_text" })
    .append( $('<li/>', {id: "GG_ID", text: "GGG_text" })
    .append( $('<li/>', {"class": "HH_CLASS", text: "HHH_text" });

var outer_list = $('<ul/>', {id: "JJ_ID" })
    .append( $('<li/>', {text: "AAA_text" })
    .append( $('<li/>', {id: "BB_ID", text: "BBB_text" })
    .append( $('<li/>', {"class": "CC_CLASS", text: "CCC_text" })
    .append( 
        $('<li/>', {id: "DD_ID", text: "DDD_text"})
        .append(inner_list)
    );

outer_list.appendTo('#xmlOutputId');

Вы могли бы фактически сделать все это в одном утверждении без var s, но, по моему мнению, это было бы слишком уродливо.

0 голосов
/ 18 января 2011

Вы можете использовать функцию шаблона jQuery, чтобы сделать это легко поддерживаемым способом.Проверьте эту ссылку: http://api.jquery.com/tmpl/

...