Como selecionar div pelo pela sua class usando javascript puro e mudar o background da div irmã?

Front-end
#1

Olá,
estou desenvolvendo uma pequena aplicação web usando javascript puro para deixar a página dinâmica. Minha página possui uma div pai (father) com uma série de divs (son) filhas(que mais tarde serão adicionadas dinamicamente pelo php), quero que ao clicar em uma div filha que possua a classe select a próxima div irmã ganhe a classe select e assim mude o seu background. A duvida é: não estou conseguindo fazer com que a div irmã ao receber a classe “select” também passe a possuir o evento de click que esta atribuído aos elemento com a classe “select” , ou seja logo após o click na primeira div com aclasse “select” ele atribui a classe para o próximo elemento porém o vento de escuta continua atrelado ao primeiro elemento, como faço para que o evento de clicar seja levado também para a próxima div junto com a classe “select”?

OBS: ainda não implementei um contador para verificar se o elemento é o ultimo da div pai.

html:

<div class="father">
	<div class="son select">
		<p>1</p>
	</div>
	<div class="son">
		<p>2</p>
	</div>
	<div class="son">
		<p>3</p>
	</div>
</div>

JavaScript:

window.onload = function(){
	get_element();
}
function get_element(){

	document.getElementsByClassName("select")[0].onclick = function(){

		this.nextSibling.nextSibling.classList.add("select");
		this.classList.remove("select");
	}
}
#2 
document.getElementsByClassName("select")[0].parentNode.childNodes

Isso vai retornar um array com todos os irmãos. Com isso, você percorre o array e faz o que quiser com o elemento desejado.

#3

Nao sei se pode valer pro seu caso, mas geralmente é mais simples usar querySelectorAll:

document.querySelectorAll(".son")

1 curtida
#4

muito obrigado consegui resolver com a sua ajuda.
o código js ficou assim:
window.onload = function(){
get_lement_selected();
}

// Função para pegar o elemento selecionado 
function get_lement_selected(){
	sons = document.querySelectorAll(".son");
	for (var i = 0; i < sons.length; i++) {
		sons[i].onclick = function(){
			if(this.nextElementSibling){
				if(this.classList.contains("selected")){
					this.nextElementSibling.classList.add("selected");
					this.classList.remove("selected");
				}
			}else{
				this.classList.remove("selected");
				this.parentNode.firstElementChild.classList.add("selected");
			}
		}
	}

}