Использование функции .find () jquery с nodeList

Question

У меня проблемы с итерацией по нодлисту для изменения определенных элементов внутри этих узлов. Вот это 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>

Я создал nodeList (как массив) всех элементов с классом ".one-di sh -row" и попытался получить доступ к h4 элемент в одном из них, чтобы изменить его. Вот это js:

  const dishNodeList = Array.from(document.querySelectorAll('.one-dish-row'));
    dishNodeList[1].find("h4").innerHtml = "Hello I am Ghadir";

Это не работает («Фалафель» не меняется на «Привет, я Гадир»). Я получаю следующую ошибку в консоли: Uncaught TypeError: dishNodeList [1] .find не является функцией.

Я не знаю, что именно не так с моим кодом. Любая помощь приветствуется.

Answer 1

Вы должны убедиться, что вы отслеживаете, какие переменные содержат HTMLCollection / NodeList, а какие являются jQuery объектами; потому что это изменит методы, к которым у вас есть доступ.

jQuery .find() вызывается из jQuery объекта, и вы используете его в NodeList; поэтому вместо jQuery find() вы пытаетесь использовать Javascript .find()

Для этого есть два подхода, если вы желая использовать jQuery методы или Javascript методы

---

Для jQuery создайте объект jQuery, заключив в него $( ), и затем вы сможете получить доступ к нужным методам - ​​используйте .find() для возврата соответствующего элемента (все еще как jQuery Object) и .text() для изменения текста этого элемента

---

For Javascript, вы можете использовать .querySelector() из вашего элемента NodeList, чтобы выбрать вниз, а затем отредактировать свойство .textContent, чтобы вставить нужный текст

const dishNodeList = Array.from(document.querySelectorAll('.one-dish-row'));

// jQuery
$(dishNodeList[1]).find('h4').text('Hello I am Ghadir');

// JavaScript
dishNodeList[1].querySelector('h4').textContent = 'Hello I am Ghadir';

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>

Answer 2

Есть 2 вещи, которые вы используете Array.prototype.find() и innerHtml:

1. Первое можно использовать для массивов, и вам нужна функция для поиска элементов и по этой причине вы получили сообщение об ошибке, вместо этого вы должны использовать getElementsByTagName('h4'),
2. Произошла ошибка с именем, вы должны использовать innerHTML вместо этого.

Как показано ниже:

const dishNodeList = Array.from(document.querySelectorAll('.one-dish-row'));
const h4Elements = dishNodeList[1].getElementsByTagName('h4');
const h4 = h4Elements[0];
h4.innerHTML = "Hello I am Ghadir";

<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>
</div>

Надеюсь, это поможет!

Answer 3

Вы используете метод поиска для коллекции html (HTMLDivElement).

Когда вы console.log (h4Elements = dishNodeList [1] .getElementsByTagName ('h4')); он возвращает ноль. вам нужно будет go вниз DOM-дерева один слой за другим, прежде чем вы установите внутренние. HTML элементы h1.

Я разбил вам это, как показано ниже.

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';

Answer 4

jQuery использует .find (). Text ():

$('.one-dish-row').eq(1).find("h4").text("Hello I am Ghadir")

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>

DOM использует querySelector и внутренний HTML (правописание !!!) или textContent

const dishNodeList = document.querySelectorAll('.one-dish-row');
dishNodeList[1].querySelector("h4").textContent = "Hello I am Ghadir";

<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>