NODELIST JAVASCRIPT

19/05/2021

0

Boa noite!
Estou querendo pegar os elementos de dentro de uma <tr> e colocar em uma <ul> sempre que aparecerem novos elementos dentro da <tr>.
E ai é retornado uma nodelist de cada elemento com querySelectorAll. Alguém conseguiria me ajudar em manipular a nodelist?
Eu precisaria trazer cada item com o seu index e em cada <ul> com seu respectivo index também...
Por exemplo: Adicionei o produto no carrinho, vai ser inserido uma nova <tr> contendo as informações, preciso sempre que fizer isso, pegar essas informações e jogar na <ul> criada.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
  const skuImagesCartGb = document.querySelectorAll(".cart-deslizante .cartSkuImage a")
  const skuNamesCartGb = document.querySelectorAll(".cart-deslizante .cartSkuName h4")
  const skuPricesCartPrGb = document.querySelectorAll(".cart-deslizante .cartSkuPrice .cartSkuUnitPrice")
  const skuQtdsCartGb = document.querySelectorAll(".cart-deslizante .cartSkuQuantity .cartSkuQtt")
 
const getElements = {
  getItens(obj) {
    var resultado = "";
    for (var i in obj) {
      if (obj.hasOwnProperty(i)) {
        resultado += i + obj[i].innerHTML;
      }
    }
    return resultado;
  }
}
 
const DOM = {
  containerProduct: document.querySelector(".minicart-itens"),
 
  addProduct(obj, index) {
    const ul = document.createElement("ul")
    ul.innerHTML = DOM.innerHTMLProduct(obj, index)
    ul.dataset.index = index
    DOM.containerProduct.appendChild(ul)
  },
 
  innerHTMLProduct(obj, index) {
    let html = `
    <li class="cartSkuImage">${getElements.getItens(obj)}</li>
    <li class="cartSkuDados">
    <div class="cartSkuName"></div>
    <div class="cartSkuPrice"></div>
    <div class="cartSkuQuantity"></div>
    </li>
    <li class="cartSkuRemove"></li>
    `;
    return html;
  }
}
 
const cart = {
  init(){
    DOM.addProduct(skuImagesCartGb)
  }
}
 
cart.init()
Guilherme Barbosa

Guilherme Barbosa

Responder

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários, consulte nossa política de privacidade.

Aceitar