Solucionado (ver solução)
Solucionado
(ver solução)
8
respostas

Como posso fazer essa iteração simultânea

Fala galera beleza? Estou com um problema aqui em JS. Eu preciso adicionar uma descrição no meu item do carrossel através do JavaScript, porém eu não consigo selecionar a NodeList e encaixar cada descrição em seu devido lugar! A ideia seria o atributo name (que é a legenda do item) entrar na tag <p> em ordem.

Eu consegui fazer tudo pelo console.log iterando nodeList[i].innerHTML = 'outraNodeList[i]' mas ai teria que fazer 1 por 1 pq só consigo retirar essa nodeList[i] depois de fazer o forEach. Abaixo segue o código que ficará mais fácil de entender :D

HTML

<div class="carrossel__trabalhos">
                        <div id="site0" class="carrossel__item carrossel__item--ativo">
                            <div class="carrossel__site" name="Legenda1">Site 1</div>
                            <p class="carrossel__descricao"></p>
                        </div>
                        <div id="site1" class="carrossel__item">
                            <div class="carrossel__site" name="Legenda2">Site 2</div>
                            <p class="carrossel__descricao"></p>
                        </div>
                        <div id="site2" class="carrossel__item">
                            <div class="carrossel__site" name="Legenda3">Site 3</div>
                            <p class="carrossel__descricao"></p>
                        </div>
                    </div>        

JS

const configuraçõesGerais = {
descricao: function(){
        const attributeNameTag = document.querySelectorAll('.carrossel__site');
        for (const legendas of attributeNameTag){
            legendas.getAttribute('name');

        }
        const tagsDescricao = document.querySelectorAll('.carrossel__descricao');
        for (const tags of tagsDescricao){
             tags;
        }
    }
}

o legendas.getAttribute('name') é oq eu preciso jogar no tags.innerHTML mais ou menos algo do gênero (bem escopo mesmo)

let  LegendasItens= legendas.getAttribute('name');
let TagsHTML = tags;
const TagsComLegendas = TagsHTML.innerHTML = LegendasItens;
//É basicamente isso que eu preciso, que sejam adicionadas as 
legendas no  HTML para poder continuar meu carrossel

. Vocês tem alguma ideia de como posso resolver isto?

Abraços

8 respostas
solução!

Eai André, tudo blz?

Cara já tentou converter o NodeList em um Array, usando o Array.form ?

Caso você não conheça aqui tá o um link legal de como fazer a conversão, mas funciona basicamente assim:

const divsNodeList = document.querySelectorAll('div');
const divsArray = Array.from(divsNodeList);

Com isso você consegue usar um foreEach e usar o indice dela pra fazer a relação, algo mais ou menos assim:

const attributeNameTag = document.querySelectorAll(".carrossel__site");
 const attributeNameTagArray = Array.from(attributeNameTag);

 const tagsDescricao = document.querySelectorAll(
    ".carrossel__descricao"
 );
 const tagsDescricaoArray = Array.from(tagsDescricao);

 tagsDescricaoArray.forEach((tag, index) => {
          let legenda = attributeNameTagArray[index];
          tag.innerHTML = legenda.getAttribute("name");
 });

Espero ter ajudado :)

Cara simplesmente PERFEITO!

Eu tinha utilizado o Array.from para converter em Array mas a grande sacada que você me falou agora e eu não tinha feito foi isto aqui

tag.innerHTML = legenda.getAttribute("name");

Eu não pensei em pegar a tag e o index e passar o getAttribute('name') no FINAL de tudo.

Você poderia me explicar se utilizar assim também é correto?

let legenda = attributeNameTagArray[index].getAttribute('name');
            tag.innerHTML = legenda;

No mais é exatamente isso que eu precisava! Então quando eu precisar iterar uma NodeList com outra NodeList eu converto em um Array e itero as duas? Abrações

Opa, que bom cara!

Assim também vai funcionar.

let legenda = attributeNameTagArray[index].getAttribute('name');
tag.innerHTML = legenda;

E sobre a parte iterar uma NodeList com outra NodeList.

Eu tenho preferencia por trabalhar usando array então sempre que aparece uma NodeList converto para array. Então não sei te falar se tem outro modo de resolver esse tipo de problema, mas com array funciona.

Abraços :)

Mathes meu rei boa noite! Preciso de ajuda novamente hehehehe

Preciso saber como eu descubro e guardo o indice de um array numa constante! Basicamente quero que este código funcione deste jeito (porém com um indice valendo por exemplo x para que eu não precise ficar repetindo o código sempre)!

Comecei a utilizar o Array.from que você indicou e ja me resolveu 2 problemas :D

Arquivo principal

import { configuraçõesGerais } from './CarrosselAcoes.js';

let asideMenuLinks = document.querySelectorAll('.carrossel__menu a[href^="#"]');
let indicadores = document.querySelectorAll('[data-target^="#"]');
asideMenuLinks = Array.from(asideMenuLinks);
indicadores = Array.from(indicadores);

const seletores = [];
const concatSeletores = seletores.concat(asideMenuLinks,indicadores);

function slideSelect(element){
    if(element.target.classList.contains('carrossel__menu__link')){
        const menuLinkId = element.target.getAttribute('href');
        const menuLinkIdHref = document.querySelector(menuLinkId);
        return menuLinkIdHref;
    }
    if(!element.target.classList.contains('')) { 
        const indicadorId = element.target.getAttribute('data-target');
        const indicadorIdDataHref = document.querySelector(indicadorId);
        return indicadorIdDataHref;
    }
}

function slideShow(event){
    event.preventDefault();
    const ativa = slideSelect(event);
    configuraçõesGerais._slideAction(this,ativa);
}

concatSeletores.forEach(link =>{
    link.addEventListener('click', slideShow);
})

Import das Ações que preciso refatorar (retirar esse bando de if's)

_slideAction: function(seletor,slide){
        const asideMenuLinks = document.querySelectorAll('.carrossel__menu a[href^="#"]');
        const indicadores = document.querySelectorAll('[data-target^="#"]');
        // console.log(indice)

        var menuAtivo = document.querySelector('.menu--selecionado');
        var indicadorAtivo = document.querySelector('.indicador--selecionado');
        var slideAtivo = document.querySelector('.carrossel__item--ativo');

        slideAtivo.classList.remove('carrossel__item--ativo');
        menuAtivo.classList.remove('menu--selecionado'); 
        indicadorAtivo.classList.remove('indicador--selecionado'); 

        // Fazer alguma coisa para que o index atual do indicadores quando for igual ao seletor adicione a classe ao index correspondendo do asideMenuLinks
        if(seletor === indicadores[0]){
            seletor.classList.add('indicador--selecionado');
            asideMenuLinks[0].classList.add('menu--selecionado');
            // console.log(seletor === indicadores[0]);
        }
        if(seletor === indicadores[1]){
            seletor.classList.add('indicador--selecionado');
            asideMenuLinks[1].classList.add('menu--selecionado');
        }
        if(seletor === indicadores[2]){
            seletor.classList.add('indicador--selecionado');
            asideMenuLinks[2].classList.add('menu--selecionado');
        }

        // Fazer alguma coisa para que o index atual do asideMenuLinks quando for igual ao seletor adicione a classe ao index correspondendo do indicadores
        if(seletor === asideMenuLinks[0]){
            seletor.classList.add('menu--selecionado');
            indicadores[0].classList.add('indicador--selecionado');
        }
        if(seletor === asideMenuLinks[1]){
            seletor.classList.add('menu--selecionado');
            indicadores[1].classList.add('indicador--selecionado');
        }
        if(seletor === asideMenuLinks[2]){
            seletor.classList.add('menu--selecionado');
            indicadores[2].classList.add('indicador--selecionado');
        }

        slide.classList.add('carrossel__item--ativo');
    }

Se puder me ajudar agradeço demais! Abrações

Se você manjar também de como eu posso salvar um valor obtido dentro de um forEach já mata outra dúvida! Um exemplo:

const umObjeto = {
    item1:  document.querySelectorAll('classeQualquer1'),
    item2:  document.querySelectorAll('classeQualquer2')
}

Object.keys(umObjeto).forEach(itens =>{
    const nodeListParaArray = Array.from(umObjeto[itens]);
});
//Ai aqui fora eu conseguir acessar os 2 arrays criados do objeto umObjeto

console.log(nodeListParaArray)

Se souber se isso é possível vai adiantar kbls minha vida!

Eu achei uma solução para a primeira pergunta! Seria a melhor forma ou posso melhorar?

asideMenuLinks.forEach(function(item,indice){
            if(item === seletor){
                asideMenuLinks[indice].classList.add('menu--selecionado');
                indicadores[indice].classList.add('indicador--selecionado');
                 slide.classList.add('carrossel__item--ativo');
            }
        })
        indicadores.forEach(function(item,indice){
            if(item === seletor){
                indicadores[indice].classList.add('indicador--selecionado');
                asideMenuLinks[indice].classList.add('menu--selecionado');
                 slide.classList.add('carrossel__item--ativo');
            }
        })

Opa, boa noite André

Cara, o primeiro caso acho que tem como deixar mais enxuta criando uma variável para guardar a função que você vai usar dentro do forEach. Algo mais ou menos assim:

const funcAddClasses =  function(item, indice){
     if(item === seletor){
                asideMenuLinks[indice].classList.add('menu--selecionado');
                indicadores[indice].classList.add('indicador--selecionado');
                 slide.classList.add('carrossel__item--ativo');
     }
};
asideMenuLinks.forEach(ffuncAddClasses);

indicadores.forEach(funcAddClasses);

Já sobre o segundo caso, você pode usar um map ao invés de um forEach. Algo assim:

const umObjeto = {
    item1:  document.querySelectorAll('classeQualquer1'),
    item2:  document.querySelectorAll('classeQualquer2')
};

const mapRetorno = Object.keys(umObjeto).map(itens => Array.from(umObjeto[itens]));

Com isso você teria a variável mapRetorno como um array dos arrays, algo com esse formato:

console.log(mapRetorno); 
//[[1,2,3],[7,8,9]]

Espero ter ajudado, Qualquer dúvida só mandar :)

Nossa perfeito meu chefe! Vou implementar a segunda no meu código do carrossel e a primeira já me agilizou para uma função de animação :D Muito obrigado mais uma vez amigo