|
|
20.03.2019, 20:53
|
|
Новичок на форуме
|
|
Регистрация: 20.03.2019
Сообщений: 2
|
|
|
Помощь с js и DOM
<div class='module'>
<div class='ololo'>
<h3 color='white'>
<i class='module-actions-icon'></i>Fortnite</h3>
<div>
<img id= "fortphoto" alt = "КупитьFortnite"onclick = "window.location=''" src=""></div></div></div>
<div class='module'>
<div class='ololo'>
<h3 color='white'> <i class='module-actions-icon'></i>CS:GO</h3>
<div>
<img id= "csgophoto" alt = "Купить CS:GO"onclick = "window.location=''" src=""></div></div></div>
На странице есть множество классов с именем module. Помогите найти именно эти два по id img. Заранее благодарен.
Последний раз редактировалось rafchikcv, 20.03.2019 в 21:02.
|
|
20.03.2019, 21:18
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
rafchikcv,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.red {
background-color: #FF0000;
color: #FFFFFF;
}
</style>
</head>
<body>
<div class='module'>
<div class='ololo'>
<h3 color='white'>
<i class='module-actions-icon'></i>Fortnite</h3>
<div>
<img id= "fortphoto" alt = "КупитьFortnite"onclick = "window.location=''" src=""></div></div></div>
<div class='module'>
<div class='ololo'>
<h3 color='white'> <i class='module-actions-icon'></i>CS:GO</h3>
<div>
<img id= "csgophoto" alt = "Купить CS:GO"onclick = "window.location=''" src=""></div></div></div>
<script>
let divs = ["#fortphoto","#csgophoto"].map(id => [...document.querySelectorAll(".module")].filter(div => div.querySelector(id))[0]);
divs.forEach(div => div.classList.add("red"))
console.log(divs)
</script>
</body>
</html>
|
|
20.03.2019, 21:19
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
rafchikcv,
[html run]
... минимальный код страницы с вашей проблемой
[/html]
О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
|
|
20.03.2019, 21:21
|
|
Новичок на форуме
|
|
Регистрация: 20.03.2019
Сообщений: 2
|
|
|
огромное спасибо!
|
|
21.03.2019, 09:38
|
 |
Профессор
|
|
Регистрация: 20.12.2009
Сообщений: 1,714
|
|
|
Сообщение от рони
|
let divs = ["#fortphoto","#csgophoto"].map(id => [...document.querySelectorAll(".module")].filter(div => div.querySelector(id))[0]);
|
let divs = [...document.querySelectorAll(".module")].filter(node => node.querySelector("#fortphoto, #csgophoto"));
|
|
21.03.2019, 10:07
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
|
Сообщение от Malleys
|
|
querySelector("#fortphoto, #csgophoto")
|
такое даже в голову не пришло (множественный селектор, для одиночного поиска)  
а нет какого нибудь contains или matches для данного случая, что-то типа https://api.jquery.com/parents/ ?
Последний раз редактировалось рони, 21.03.2019 в 10:12.
|
|
22.03.2019, 08:00
|
|
Профессор
|
|
Регистрация: 20.12.2009
Сообщений: 1,714
|
|
В CSS Selectors Level 4 определён псевдо-класс has, который позволяет это сделать так...
let divs = [...document.querySelectorAll(".module:has(#fortphoto, #csgophoto)")];
https://caniuse.com/#feat=css-has однако нигде не реализовано |
|
22.03.2019, 08:15
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
Malleys,
|
|
22.03.2019, 14:38
|
 |
Профессор
|
|
Регистрация: 25.10.2016
Сообщений: 1,012
|
|
самый быстрый вариант:
var m1 = document.getElementById('fortphoto').closest('.module');
var m2 = document.getElementById('csgophoto').closest('.module');
|
|
22.03.2019, 14:48
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
Alexandroppolus,
|
|
|
|
