Создать и добавить элемент, innerHTML? ужас ... [пожалуйста, не спрашивайте] - PullRequest
Новая
       64

Создать и добавить элемент, innerHTML? ужас ... [пожалуйста, не спрашивайте]

1 голос
/ 28 ноября 2011

У меня есть скрипт, который возвращает список в алфавитном порядке следующим образом 

<div id="x">
    <ul>
        <li>Apple
        <li>Banana
        <li>Blackberry
        <li>Blueberry
        <li>Cherry
        <li>Cranberry
    </ul>
</div>

Однако в списке много элементов (почти 100), и я надеюсь изменить их следующим образом 

<div id="x">
    <span id="A">A</span>
    <ul>
        <li>Apple
    </ul>
    <span id="B">B</span>
    <ul>
        <li>Banana
        <li>Blackberry
        <li>Blueberry
    </ul>
    <span id="C">C</span>
    <ul>
        <li>Cherry
        <li>Cranberry
    </ul>     
<div>

Кстати, я не сортирую фрукты, это всего лишь пример.
Это ДОЛЖНО быть в такой форме, по причинам, которые не имеют значения, мне просто нужна помощь в создании и добавлении элементов span и отдельных списков. Я попытался использовать внутренний / внешний HTML, и я считаю, что это действительно очень сложно. В настоящее время у меня есть что-то вроде этого: 

function getAllLists()  
{  
var page = document.getElementById("x")
var allLists = page.getElementsByTagName("li");   
var num = allLists.length;  
//Some form of a for counter loop here
for (var counter = 0; counter < num; counter++) {   
    var first=allLists[counter].outerHTML;
    var second=allLists[counter+1].outerHTML;
    var firstletter= (allLists[counter].substring(0, 1)).toUpperCase();
    var secondletter= (allLists[counter+1].substring(0, 1)).toUpperCase();
    allLists[counter].outerHTML = '<span id="'+firstletter+'">'+firstletter+'</span>'+first;
    }
}

ПОЖАЛУЙСТА, ПОЖАЛУЙСТА, ПОЖАЛУЙСТА, ИЗБЕГАЙТЕ ИСПОЛЬЗОВАТЬ JQUERY.
Я не могу подчеркнуть это достаточно !!
Мало того, что я нахожу это чрезвычайно трудным для понимания, так как я все еще любитель javascript и нахожу js и так достаточно сложным, синтаксис для jquery просто тупо труден для понимания.

Я уверен, что можно достичь того, к чему я стремлюсь, БЕЗ необходимости использовать jquery.

Есть идеи? вся помощь / комментарии / идеи более чем оценены.
Большое спасибо.

Ответы [ 3 ]

2 голосов
/ 28 ноября 2011

Во-первых, забудьте все о манипулировании DOM с помощью inner / outerHTML.Они удобны для вставки фрагментов HTML или разделов документов, но они определенно не предназначены для общих манипуляций с DOM.

Используйте методы DOM.

Во-первых, загрузите все элементы LI в массив,Затем сортируйте их, используя функцию сортировки.Затем поместите их обратно в DOM, завернутые в элементы UL и разделенные интервалами каждый раз, когда меняется первая буква.

Редактировать

Вот функция, которая выполняет эту работу.Это сортирует LIs, не уверенный, действительно ли это необходимо.Если нет, функция становится намного проще. 

<script type="text/javascript">

// Simple helper
function getText(el) {
  if (typeof el.textContent == 'string') {
    return el.textContent.replace(/^\s+|\s+$/g,'');
  }
  if (typeof el.innerText == 'string') {
    return el.innerText.replace(/^\s+|\s+$/g,'');
  }
}

function sortLIs(id) {
  // Get the element
  var el = document.getElementById(id);

  // Get the UL element that will be replaced
  var sourceUl = el.getElementsByTagName('ul')[0];

  // Get the LIs and put them into an array for sorting
  var nodes = sourceUl.getElementsByTagName('li');
  var li, lis = [];

  for (var i=0, iLen=nodes.length; i<iLen; i++) {
    lis[i] = nodes[i];
  }

  // Sort them
  lis.sort(function(a, b) {
    return  getText(a) > getText(b)? 1 : -1;
  });

  // Now put them into the document in different ULs separated
  // by spans.
  // Create some temporary elements for cloning
  var ul, ulo = document.createElement('ul');
  var sp, spo = document.createElement('span');
  var frag = document.createDocumentFragment(); // fragments are handy
  var firstChar, currentChar;

  // For each LI in the array...
  for (i=0; i<iLen; i++) {
    li = lis[i];
    firstChar = getText(li).substr(0,1) || '';

    // If first char doesn't match current, create a new span
    // and UL for LIs
    if (firstChar !== currentChar) {
      currentChar = firstChar;

      // New span
      sp = spo.cloneNode(false);
      sp.appendChild(document.createTextNode(firstChar.toUpperCase()));
      sp.id = firstChar;
      frag.appendChild(sp);

      // New UL
      ul = ulo.cloneNode(false);
      frag.appendChild(ul);
    }

    // Add the li to the current ul
    ul.appendChild(li);
  }

  // Replace the UL in the document with the fragment
  el.replaceChild(frag, sourceUl);
}

</script>


<div id="x">
    <ul>
        <li>Cherry
        <li>Banana
        <li>Apple
        <li>Blueberry
        <li>Cranberry
        <li>Blackberry
    </ul>
</div>

<button onclick="sortLIs('x');">Sort</button>

Обратите внимание, что LI просто перемещаются во фрагмент документа и исходный UL заменяется несколькими элементами.Я перепутал LI, чтобы показать, что сортировка работает.

Edit 2

Если у вас есть массив как текст, то: 

var fruits = ['Cherry','Banana','Apple','Blueberry',
              'Cranberry','Blackberry'].sort();

function insertFruits(id) {
  var el = document.getElementById(id);

  // Check that the above worked
  if (!el) return;

  var frag = document.createDocumentFragment();
  var li, lio = document.createElement('li');
  var ul, ulo = document.createElement('ul');
  var sp, spo = document.createElement('span');
  var firstChar, currentChar;

  for (var i=0, iLen=fruits.length; i<iLen; i++) {
    fruit = fruits[i];
    firstChar = fruit.substr(0,1).toUpperCase();

    if (firstChar !== currentChar) {
      currentChar = firstChar;
      sp = spo.cloneNode(false);
      sp.appendChild(document.createTextNode(firstChar));
      sp.id = firstChar;
      frag.appendChild(sp);
      ul = ulo.cloneNode(false);
      frag.appendChild(ul);
    }
    li = lio.cloneNode(false);
    li.appendChild(document.createTextNode(fruit));
    ul.appendChild(li);
  }
  el.appendChild(frag);
}
0 голосов
/ 28 ноября 2011

Ну, вот как я это делаю: 

var allLists, elements, item, lastLetter, lastUl, letter, page, span, _i, _len;

page = document.getElementById("x");
allLists = page.getElementsByTagName("li");
lastLetter = null;
lastUl = null;
elements = document.createDocumentFragment();

for (_i = 0, _len = allLists.length; _i < _len; _i++) {
  item = allLists[_i];
  letter = item.innerText[0].toUpperCase();
  if (letter !== lastLetter) {
    lastLetter = letter;
    span = document.createElement('span');
    span.innerText = letter;
    span.id = letter;
    elements.appendChild(span);
    lastUl = document.createElement('ul');
    elements.appendChild(lastUl);
  }
  lastUl.appendChild(item.cloneNode(true));
}

while (page.firstChild) page.removeChild(page.firstChild);

page.appendChild(elements.cloneNode(true));

Смотрите эту работу здесь: http://jsfiddle.net/HjWhY/

0 голосов
/ 28 ноября 2011

HTML: 

<body>
  <div id="x">
    <ul>
        <li>Apple
        <li>Banana
        <li>Blackberry
        <li>Blueberry
        <li>Cherry
        <li>Cranberry
    </ul>
    <ul id="new"></ul>

JavaScript: 

var list = document.querySelector('#x ul'),
    newUl = document.getElementById('new'),
    fruits = [],
    key = "A";

for(var i=0; i<list.children.length; i++){
  fruits.push(list.children[i].innerText);
}

fruits.sort();

for(var i=0; i<fruits.length; i++){
  if(key == fruits[i].split('')[0]){
    var span = document.createElement('span'),
        li = document.createElement('li');
    span.setAttribute('id', key);
    li.innerText = fruits[i];
    if(document.getElementById(key)){
      document.getElementById(key).appendChild(li);
    }
    else{
      span.appendChild(li);
      newUl.appendChild(span);
    }

  }
  if(fruits[i+1]){
    key = fruits[i+1].split('')[0];
  }
}

Пример:

Живой код
...