Javascript 将.find（）jquery函数与节点列表一起使用

我在迭代节点列表以更改这些节点中的某些元素时遇到了问题。 以下是html：

 <div class="row one-dish-row dish1">
        <div class="dishes-container">
          <h4>Falafel</h4>
          <p></p>
        </div>
        <div class="prices-container">
          <h5></h5>L.L.
        </div>
      </div>

      <div class="row one-dish-row dish2">
        <div class="dishes-container">
          <h4>Falafel</h4>
          <p></p>
        </div>
        <div class="prices-container">
          <h5></h5>L.L.
        </div>
      </div>

      <div class="row one-dish-row dish3">
        <div class="dishes-container">
          <h4>Falafel</h4>
          <p></p>
        </div>
        <div class="prices-container">
          <h5></h5>L.L.
        </div>
      </div>

“法拉费”不会变成“你好，我是加迪尔”。我在控制台中遇到以下错误：Uncaught TypeError:dishNodeList[1]。find不是函数

---

我不知道我的代码到底出了什么问题。非常感谢您的帮助。

jQuery正在使用。find.text:

$'.one dish row'.eq1.findh4.text你好，我是Ghadir 法拉费 L.L。 法拉费 L.L。 法拉费 L.L。

---

jQuery正在使用.find.text：

$'.one dish row'.eq1.findh4.text你好，我是Ghadir 法拉费 L.L。 法拉费 L.L。 法拉费 L.L。

---

有两件事，您正在使用和innerHtml：

第一个可以在数组上使用，需要一个函数来查找元素，这就是为什么会出现错误消息，而应该使用， 名称有误，您应该改用。 例如：

const dishNodeList=Array.fromdocument.queryselectoral'.one dish row'； const h4Elements=dishNodeList[1]。getElementsByTagName'h4'； 常数h4=h4元素[0]； h4.innerHTML=你好，我是Ghadir； 法拉费 L.L。 法拉费 L.L。 法拉费 L.L。

---

有两件事，您正在使用和innerHtml：

第一个可以在数组上使用，需要一个函数来查找元素，这就是为什么会出现错误消息，而应该使用， 名称有误，您应该改用。 例如：

const dishNodeList=Array.fromdocument.queryselectoral'.one dish row'； const h4Elements=dishNodeList[1]。getElementsByTagName'h4'； 常数h4=h4元素[0]； h4.innerHTML=你好，我是Ghadir； 法拉费 L.L。 法拉费 L.L。 法拉费 L.L。

---

您应该确保跟踪哪些变量包含HTMLCollection/NodeList，哪些是jQuery对象；因为它将更改您可以访问的方法

jQuery是从jQuery对象调用的，您正在节点列表上使用它；因此，您尝试使用Javascript而不是jQuery

如果您想使用jQuery方法或Javascript方法，有两种方法可以实现这一点

对于jQuery，用$包装创建jQuery对象，然后您就可以访问正确的方法-用于将匹配的元素仍然作为jQuery对象返回，并更改该元素的文本

对于Javascript，您可以使用从节点列表项向下选择，然后编辑属性以插入所需的文本

const dishNodeList=Array.fromdocument.queryselectoral'.one dish row'； //jQuery $dishNodeList[1]。查找'h4'。文本'Hello I am Ghadir'； //JavaScript dishNodeList[1]。查询选择器'h4'。textContent='Hello I am Ghadir'； 法拉费 L.L。 法拉费 L.L。 法拉费 L.L。

---

您应该确保跟踪哪些变量包含HTMLCollection/NodeList，哪些是jQuery对象；因为它将更改您可以访问的方法

jQuery是从jQuery对象调用的，您正在节点列表上使用它；因此，您尝试使用Javascript而不是jQuery

如果您想使用jQuery方法或Javascript方法，有两种方法可以实现这一点

对于jQuery，用$包装创建jQuery对象，然后您就可以访问正确的方法-用于将匹配的元素仍然作为jQuery对象返回，并更改该元素的文本

对于Javascript，您可以使用从节点列表项向下选择，然后编辑属性以插入所需的文本

const dishNodeList=Array.fromdocument.queryselectoral'.one dish row'； //jQuery $dishNodeList[1]。查找'h4'。文本'Hello I am Ghadir'； //JavaScript dishNodeList[1]。查询选择器'h4'。textContent='Hello I am Ghadir'； 法拉费 L.L。 法拉费 L.L。 法拉费 L.L。

---

您正在html集合HtmlLevel上使用find方法

当您console.log h4Elements=dishNodeList[1].getElementsByTagName'h4'时； 它返回null。 在设置h1的inner.HTML元素之前，您需要一层接一层地遍历DOM树

我已将此分解为以下内容

const dishNodeList = Array.from(document.querySelectorAll('.one-dish-row'));        
const dishNodeListOne = dishNodeList[1];        
const firstElchild = dishNodeListOne.firstElementChild;
const firstChildEl = firstElchild.firstElementChild;
 firstChildEl.innerHTML= 'Hello I am Ghadir';

---

您正在html集合HtmlLevel上使用find方法

当您console.log h4Elements=dishNodeList[1].getElementsByTagName'h4'时； 它返回null。 在设置h1的inner.HTML元素之前，您需要一层接一层地遍历DOM树

我已将此分解为以下内容

const dishNodeList = Array.from(document.querySelectorAll('.one-dish-row'));        
const dishNodeListOne = dishNodeList[1];        
const firstElchild = dishNodeListOne.firstElementChild;
const firstChildEl = firstElchild.firstElementChild;
 firstChildEl.innerHTML= 'Hello I am Ghadir';

---

但是你没有在这里使用jQuery find，你有一个普通数组并在DOM节点上调用find你真的在寻找一个jQuery解决方案还是简单的JavaScript？只要我了解发生了什么，任何解决方案都可以。但是你没有在这里使用jQuery find，你有一个普通数组，在DOM节点上调用find。你真的在寻找jQuery解决方案还是纯JavaScript？只要我了解发生了什么，任何解决方案都可以。我相信这可能会起作用，尽管我没有尝试过——这很耗时，这正是我想要find函数的目的。下面有一个与查找相关的答案，所以我选择了它，但无论如何，谢谢你的回答。我相信这可能会起作用，尽管我没有尝试过它-这很耗时，这正是我想要查找功能的原因。下面有一个与find相关的答案，所以我选择了它，但无论如何，谢谢你的回答。我似乎把jQuery和vanilla javascript混淆了，我觉得我们可以做到这一点。我还没有尝试过您的解决方案，因为我使用了这里建议的另一个代码，但我想它非常类似，getElementsByTagName'h4'也可以工作。另外，VS代码以innerHtml的形式完成它-我不知道为什么。无论如何，谢谢你！似乎我把jQuery和香草javascript混淆了，我觉得我们可以做到这一点。我还没有尝试过您的解决方案，因为我使用了这里建议的另一个代码，但我想它非常类似，getElementsByTagName'h4'也可以工作。另外，VS代码以innerHtml的形式完成它-我不知道为什么。无论如何，谢谢你！你的答案是最有用的，你的代码是最短的，所以我选择了这个。我需要学习更多关于javascript的知识，所以是的，我把普通js和jQuery搞混了，谢谢你的解释。你的回答是最有帮助的，你的代码是最短的，所以我选择了这个。我需要学习更多关于javascript的知识，所以是的，我把普通js和jQuery搞混了，谢谢你的解释。