1

Pergunta simples, mas não consigo encontrar uma forma de fazer. Preciso substituir um valor dentro de uma das "células" de cada linha desta tabela. Segue o código (extenso, mas simples):

                        <div class="col s12">
                            <div class="analists">
                                    <div class="analists-header">
                                            <div class="line">
                                                <div class="col s3">
                                                    Login
                                                </div>
                                                <div class="col s5">
                                                    Nome
                                                </div>
                                                <div class="col s2">
                                                    Chat em Andamento
                                                </div>
                                                <div class="col s2">
                                                    Max Chats
                                                </div>
                                            </div>
                                    </div>

                                <div class="analists-content">
                                            <div id="listAgent">
                                                <div class="line">
                                                    <div class="col s3">
                                                        601305
                                                    </div>
                                                    <div class="col s5">
                                                        601305
                                                    </div>
                                                    <div class="col s2">
                                                        4
                                                    </div>
                                                    <div class="col s2">
                                                        4
                                                    </div>
                                                </div>
                                            </div>  
                                            <div id="listAgent">
                                                <div class="line">
                                                    <div class="col s3">
                                                        601150
                                                    </div>
                                                    <div class="col s5">
                                                        601150
                                                    </div>
                                                    <div class="col s2">
                                                        2
                                                    </div>
                                                    <div class="col s2">
                                                        4
                                                    </div>
                                                </div>
                                            </div>  
                                            <div id="listAgent">
                                                <div class="line">
                                                    <div class="col s3">
                                                        601160
                                                    </div>
                                                    <div class="col s5">
                                                        601160
                                                    </div>
                                                    <div class="col s2">
                                                        1
                                                    </div>
                                                    <div class="col s2">
                                                        4
                                                    </div>
                                                </div>
                                            </div>  
                                            <div id="listAgent">
                                                <div class="line">
                                                    <div class="col s3">
                                                        601560
                                                    </div>
                                                    <div class="col s5">
                                                        601560
                                                    </div>
                                                    <div class="col s2">
                                                        2
                                                    </div>
                                                    <div class="col s2">
                                                        4
                                                    </div>
                                                </div>
                                            </div>  
                                            <div id="listAgent">
                                                <div class="line">
                                                    <div class="col s3">
                                                        601226
                                                    </div>
                                                    <div class="col s5">
                                                        601226
                                                    </div>
                                                    <div class="col s2">
                                                        3
                                                    </div>
                                                    <div class="col s2">
                                                        4
                                                    </div>
                                                </div>
                                            </div>  
                                            <div id="listAgent">
                                                <div class="line">
                                                    <div class="col s3">
                                                        601457
                                                    </div>
                                                    <div class="col s5">
                                                        601457
                                                    </div>
                                                    <div class="col s2">
                                                        3
                                                    </div>
                                                    <div class="col s2">
                                                        4
                                                    </div>
                                                </div>
                                            </div>  
                                </div>
                            </div>
                        </div>

Pois bem. Tentei por bastante tempo, e o mais próximo que conseguir chegar foi nisso:

$('.s3').text($('.s3').text().includes('601305') ? 'teste' : '');

para ver se conseguia substituir o valor de 601305 na tabela na primeira coluna pela palavra 'teste', mas fazendo isso acabo por substituir isso na coluna inteira, todas as células ficam iguais. Preciso colocar uma palavra diferente pra cada código em cada célula, então preciso me referir apenas a aquela célula da tabela, e não a coluna toda. O problema é que a classe de todas as linhas/colunas é igual, não consigo me referir a uma sozinha.

Como devo proceder?

5
  • Só uma observação, ids devem ser únicos em documentos Html.
    – LeAndrade
    Commented 14/08/2018 às 21:48
  • Eu concordo, entretanto, não fui eu que fiz o site, só estou desenvolvendo um script pra ser adicionado no mesmo, não posso mudar o resto. Commented 15/08/2018 às 11:36
  • Seguindo a observação que foi dita, o garantir que o id é unico é mais importante do que parece, pois irá garantir que a sua página está correta, e ids repetidos podem fazer com que várias partes do seu site possam não funcionar corretamente, desde <input>, <radio>, css, javascript, etc. Por isso aconselho vivamente a alterar os ids e respetivamente ajustar o resto da página para que funcione com os novos ids/classes. Aproveite e veja como a documentação indica que o atributo id tem de ser único numa página.
    – Isac
    Commented 15/08/2018 às 15:38
  • 1
    Isac, não tenho acesso/poder para alterar o html da página. Ela foi feita por uma empresa terceirizada à minha empresa, e fui solicitado a fazer apenas o script para uso interno. Eu entendo a importancia do id ser único para cada objeto, e foi exatamente por ele não ser único que eu tive este problema, mas não tenho como alterar isso na página, infelizmente. Commented 15/08/2018 às 15:41
  • Bem se não pode mexer não ha nada a fazer a esse ponto. Mas como aparte acho péssimo que uma empresa terceira lhe dê um site com páginas que tem id's repetidos, mas acaba por ser o profissionalismo que vemos por ai (apenas um desabafo :D)!
    – Isac
    Commented 15/08/2018 às 15:44

2 Respostas 2

2
$(".s3:contains('601457')").html("TESTE");
4
  • 1
    Seria interessante explicar o seletor que utilizou, talvez até acrescentando uma referência à documentação para que o autor possa ler mais se quiser. Para além disso é importante também mencionar que isso é um seletor de JQuery não de CSS3. Ou seja, tem sempre coisas interessantes para mencionar de forma a que todos aprendam e não simplesmente jogar um código sem qualquer texto a explicar o que fez e porque funciona.
    – Isac
    Commented 14/08/2018 às 23:40
  • @Isac concordo, entretanto, eu já fui atrás de descobrir este seletor, e como ele funciona e pra mim, em específico, a resposta dele já foi suficiente para eu conseguir fazer, e como funciona eu descubro sozinho, eu estava tendo dificuldade pra achar uma forma de fazer. Se ela existe, e é tão simples, eu vou atrás e descubro como funciona. Obrigado aos dois Commented 15/08/2018 às 12:11
  • @MáttheusSpoo A questão é que, embora seja bom que cada pessoa tenha iniciativa de procurar as coisas e perceber, que faz parte do motivo pelo qual perguntam nas redes do StackOverflow, cada resposta no StackOverflow deve ser o mais completa possível desde que não fuja ao perguntado. Num caso simples como este até evitando com que a pessoa tenha agora que fazer outra busca para saber que existe um pseudo seletor :contains e como ele funciona. No fim queremos que isto seja uma fonte de conhecimento por si só e não um ponto de partida para mais buscas.
    – Isac
    Commented 15/08/2018 às 15:35
  • @Isac, entendo. Obrigado pelo esclarecimento. Commented 15/08/2018 às 15:38
1

Complementado a resposta anterior por dois motivos

  1. Garantir todas as larguras de colunas
  2. Que a grid é da class analists
  3. Que o código é exactamente igual a

$('.analists .s1,.analists .s2, .analists .s3, .analists .s4, .analists .s5, .analists .s6, .analists .s7, .analists .s8, .analists .s9, .analists .s10, .analists .s11, .analists .s12 ').each(function (index, div) {						
	if (div.innerText.trim() == "601305") {
		div.innerText="teste"
	}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col s12">
		<div class="analists">
			<div class="analists-header">
				<div class="line">
					<div class="col s3">
						Login
					</div>
					<div class="col s5">
						Nome
					</div>
					<div class="col s2">
						Chat em Andamento
					</div>
					<div class="col s2">
						Max Chats
					</div>
				</div>
			</div>

			<div class="analists-content">
				<div id="listAgent">
					<div class="line">
						<div class="col s3">
							601305
						</div>
						<div class="col s5">
							601305
						</div>
						<div class="col s2">
							4
						</div>
						<div class="col s2">
							4
						</div>
					</div>
				</div>
				<div id="listAgent">
					<div class="line">
						<div class="col s3">
							601150
						</div>
						<div class="col s5">
							601150
						</div>
						<div class="col s2">
							2
						</div>
						<div class="col s2">
							4
						</div>
					</div>
				</div>
				<div id="listAgent">
					<div class="line">
						<div class="col s3">
							601160
						</div>
						<div class="col s5">
							601160
						</div>
						<div class="col s2">
							1
						</div>
						<div class="col s2">
							4
						</div>
					</div>
				</div>
				<div id="listAgent">
					<div class="line">
						<div class="col s3">
							601560
						</div>
						<div class="col s5">
							601560
						</div>
						<div class="col s2">
							2
						</div>
						<div class="col s2">
							4
						</div>
					</div>
				</div>
				<div id="listAgent">
					<div class="line">
						<div class="col s3">
							601226
						</div>
						<div class="col s5">
							601226
						</div>
						<div class="col s2">
							3
						</div>
						<div class="col s2">
							4
						</div>
					</div>
				</div>
				<div id="listAgent">
					<div class="line">
						<div class="col s3">
							601457
						</div>
						<div class="col s5">
							601457
						</div>
						<div class="col s2">
							3
						</div>
						<div class="col s2">
							4
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .