gpt4 book ai didi

javascript - 创建并附加一个元素,innerHTML?恐怖... [请不要使用 jquery]

转载 作者:行者123 更新时间:2023-11-30 18:35:38 27 4
gpt4 key购买 nike

我有一个按字母顺序返回列表的脚本,如下所示

<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 就可以实现我的目标。

有任何想法吗?非常感谢所有帮助/评论/想法。
非常感谢。

最佳答案

首先忘记使用 inner/outerHTML 操作 DOM。它们对于插入 HTML block 或文档部分很方便,但绝对不适合一般的 DOM 操作。

使用 DOM 方法。

首先,将所有 LI 元素加载到一个数组中。然后使用排序函数对它们进行排序。然后将它们放回包含在 UL 元素中的 DOM 中,并在每次第一个字母发生变化时用 span 分隔。

编辑

这是一个完成这项工作的函数。它对 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);
}

关于javascript - 创建并附加一个元素,innerHTML?恐怖... [请不要使用 jquery],我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8290513/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com