Question

帮助。我很困惑，并且非常喜欢JavaScript和jQuery。

我可以在网上找到一些示例来替换DOM中的一个子元素。

我在https://www.w3schools.com/jsref/met_node_replacechild.asp找到一个例子，标题是“ HTML DOM replaceChild（）方法” 那告诉我如何替换一个。如何替换其中的16个列表？（八对）。

我已经（连续两周）（每天一次半小时或更长时间）进行这项工作，这使我发疯。答案似乎很简单。

我需要用另一个列表替换一个列表。我想我需要先将其转换为数组，但不确定。

我知道如何使用以下命令获取列表并将其转换为数组：

//grabs all the inner values as a NodeList

var cardsInnerVal = document.querySelectorAll('li.card i');

//turns each of the inner values into an array

var cardsInnerValArray = Array.from(cardsInnerVal);

这是原始的DOM结构，我需要替换的是i元素

我所拥有的：

<ul class="deck">
  <li class="card">
    <i class="fa fa-diamond"></li>

其中有16对-8对匹配（还有汽车，火车，飞机等等）

我知道我可以通过对项目1进行硬编码来替换现有的项目1，从而一次替换一次，但是一旦我再次对其进行洗牌，该列表就会更改，因此我必须以循环方式进行编程。 / p>

我也可以通过某种方式使用此功能（如下）。不确定。

//grabs all of the .card class items
var allCards = document.querySelectorAll('.card');  //grabs all the values as a NodeList

var allCardsArray = Array.from(allCards);  //turns each of the card values into an array

我尝试了很多不起作用的事情一种功能的尝试-但这是一个错误：

未捕获的TypeError：deckField.appendChild不是函数

我认为这可能不起作用，因为它不在循环中。

var deckField = document.querySelector('deck');

// Deal cards to initialize the Game

function deal() {

  for (const item of cardsInnerValArray) {
    $deckField = $('.deck');

    const li = document.createElement('li');
    const icons = item;

    li.classList.add('card');
    li.innerHTML = deckField.appendChild(li);
  }

}

deal();

任何人都可以理解并帮助我吗？

Answer 1

我在那里看不到很多jQuery。另外，您显示的HTML列表不起作用，因此很难弄清最终想要的是什么。

你的意思是这样吗？

<ul class="deck">
        <li class="card">card 1</li>
        <li class="card">car 1</li>
        <li class="card">plane 1</li>
        <li class="card">train 1</li>
        <li class="card">card 2</li>
        <!-- etc etc...-->
</ul>

如果是这样，则可以通过jQuery进行如下操作：

//Clear the deck. Select it by the class you've given it
//(though it may be safer to give it an id, so you can select
//specifically without worrying about catching any others), then
//clear all the html it contains.

$('.deck').html("");

//use jQuery 'each' to loop over array and put new list items
//into the inner html of the list

$.each(cardsInnerValArray, function(index, value){
    $('.deck').append('<li class="card">' + value + '</li>');
})

已更新以添加此代码（根据您的评论，在其中向我展示了一些无效的jQuery“每个”代码）。我相信下面的修复应该可以解决问题。

$.each(cardsInnerValArray, function(index, value){
    $('.deck').append('<li class="card"><i class="' + value + '"></i></li>');
});

首先，您不需要那么多地分解HTML字符串。看来您将其分解为单独的小字符串，以将其拆分为<li>，</li>和其他“整个”部分。这不是必需的，因为HTML只是一种标记语言，它只会读取提供的内容并尝试对其进行处理。您可以将其全部作为一个粗大的字符串放入，并且仅在需要添加变量值时才将其分解，就像我上面在+ value +...部分中所做的那样。

其次，您尝试使用cardsInnerValArray[value]访问所需的值。这是不正确的，原因有两个。 1：您应该使用 index ，因此它将为cardsInnerValArray[index]。这会起作用。但这不是必需的，因为... 2：2：jQuery的“每个”循环已经为您提供了值（称为 value ！）。

这里有一个简短的解释：

jQuery的“每个”方法遍历您提供的对象的内容。 “索引”是数组的索引号（从0开始），“值”是给定循环中正在查看的内容的实际值。

例如，如果您有一个像这样的数组：

["car", "train", "plane", "bus"]

然后jQuery'each'函数将像这样循环：

index = 0，值=“ car”;

index = 1，value =“ train”;

index = 2，值=“ plane”;

index = 3，值=“ bus”;

因此，在jQuery“每个”循环中，您主要只需要使用“值”部分来添加所需的数据。因此，我上面编写的代码。

JavaScript-用<li>元素中的列表替换列表

1 个答案: