Создать и добавить элемент, innerHTML? ужас... [пожалуйста, не спрашивайте]
У меня есть скрипт, который возвращает список в алфавитном порядке следующим образом
<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 ответа
Во-первых, забудьте о манипулировании 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, чтобы показать, что сортировка работает.
Редактировать 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);
}
Ну, вот как я это делаю:
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/
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];
}
}