Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 20.03.2019, 19:53
Новичок на форуме
Отправить личное сообщение для rafchikcv Посмотреть профиль Найти все сообщения от rafchikcv
 
Регистрация: 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 в 20:02.
Ответить с цитированием
  #2 (permalink)  
Старый 20.03.2019, 20:18
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 25,852

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>
Ответить с цитированием
  #3 (permalink)  
Старый 20.03.2019, 20:19
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 25,852

rafchikcv,
[html run]
... минимальный код страницы с вашей проблемой
[/html]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
Ответить с цитированием
  #4 (permalink)  
Старый 20.03.2019, 20:21
Новичок на форуме
Отправить личное сообщение для rafchikcv Посмотреть профиль Найти все сообщения от rafchikcv
 
Регистрация: 20.03.2019
Сообщений: 2

огромное спасибо!
Ответить с цитированием
  #5 (permalink)  
Старый 21.03.2019, 08:38
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 801

Сообщение от рони
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"));
Ответить с цитированием
  #6 (permalink)  
Старый 21.03.2019, 09:07
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 25,852

Сообщение от Malleys
querySelector("#fortphoto, #csgophoto")
такое даже в голову не пришло (множественный селектор, для одиночного поиска)
а нет какого нибудь contains или matches для данного случая, что-то типа https://api.jquery.com/parents/ ?

Последний раз редактировалось рони, 21.03.2019 в 09:12.
Ответить с цитированием
  #7 (permalink)  
Старый 22.03.2019, 07:00
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 801

В CSS Selectors Level 4 определён псевдо-класс has, который позволяет это сделать так...
let divs = [...document.querySelectorAll(".module:has(#fortphoto, #csgophoto)")];


https://caniuse.com/#feat=css-has однако нигде не реализовано
Ответить с цитированием
  #8 (permalink)  
Старый 22.03.2019, 07:15
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 25,852

Malleys,
Ответить с цитированием
  #9 (permalink)  
Старый 22.03.2019, 13:38
Аватар для Alexandroppolus
Профессор
Отправить личное сообщение для Alexandroppolus Посмотреть профиль Найти все сообщения от Alexandroppolus
 
Регистрация: 25.10.2016
Сообщений: 626

самый быстрый вариант:

var m1 = document.getElementById('fortphoto').closest('.module');
var m2 = document.getElementById('csgophoto').closest('.module');
Ответить с цитированием
  #10 (permalink)  
Старый 22.03.2019, 13:48
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 25,852

Alexandroppolus,
Ответить с цитированием
Ответ


Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
DOM доступ js в страницу во фрейме Brick Javascript под браузер 27 14.08.2018 00:15
Помощь новичку в JS Andry_JS Общие вопросы Javascript 24 06.03.2015 05:53
нужна помощь по JS и JQuery cema93 Работа 1 16.12.2014 18:41
Окажите помощь РНР-сту с событиями JS brigz Общие вопросы Javascript 4 07.06.2012 20:48
JS, RDFa, DOM, XML - Help! О_о Djumpen Общие вопросы Javascript 5 18.11.2010 18:37