35

Тоже самое только на JS. Как перевести?

$(document).ready(function(){
        $("#form_error_message_frontend + div > div:last-child label").addClass("last");
    })
1

4 ответа 4

57

Как-то так:

document.addEventListener('DOMContentLoaded', function(){ // Аналог $(document).ready(function(){
  // Если должен быть найден один элемент
  if((e = document.querySelector("#form_error_message_frontend + div > div:last-child label")) !== null)
    e.classList.add('last'); // Аналог выборки и присвоения класса
  // Если элементов будет много
  Array.prototype.forEach.call(document.querySelectorAll("#form_error_message_frontend + div > div:last-child label"), function(e){
   e.classList.add('last');
  });
});
10
  • 1
    Требуется не querySelector, а querySelectorAll плюс итерация по возвращаемому NodeList.
    – VisioN
    7 апр 2015 в 15:03
  • 1
    @VisioN, класс last недвусмысленно намекает что найдётся только один элемент, а значит можно искать через querySelector. Хотя если у ТС'а не так, то перепишем :)
    – user31688
    7 апр 2015 в 15:06
  • 1
    Не совсем так :) Хоть это и может противоречить здравому смыслу, но элементов label в последнем блоке может быть несколько. В этом случае, чисто логически, добавляемый класс "last" может относиться не к последнему label, а ко всем label в последнем блоке.
    – VisioN
    7 апр 2015 в 15:09
  • 1
    Я знаю, друг мой, но я понадеялся на здравый смысл автора :) Если ответ примется, то смысл на месте, ежели нет - перепишем на цикл, делов-то...
    – user31688
    7 апр 2015 в 15:12
  • 1
    Хорошо, будем надеяться :) Но тогда, чтобы не вышло неувязочки, для querySelector можно добавить проверку на наличие возвращаемого элемента перед обращением к свойству classList: а ну как undefined вернет?
    – VisioN
    7 апр 2015 в 15:15
20

хороший ответ есть здесь

90+% браузеров покроет вот такое решение для ожидания окончания загрузки

document.addEventListener("DOMContentLoaded", function(event) { 
  //do work
});

для 95+% браузеров можно использовать методы querySelector/querySelectorAll

var el = document.querySelector("#form_error_message_frontend + div > div:last-child label");
el.className += el.className ? ' last' : 'last'
3

Возможно вам будет достаточно добавить отложенную загрузку скрипта атрибутом "defer" в <script> Так скрипт дождется загрузки всего DOM дерева, после чего запустится.

4
  • Можно пруф? Первый раз об этом слышу...
    – user273805
    3 окт 2018 в 3:45
  • "A script that will not run until after the page has loaded" w3schools.com/tags/att_script_defer.asp 4 окт 2018 в 8:54
  • Осталось понять, что значит "page has loaded". Потому что не нужно ждать подгрузки картинок, чтобы начать выполнять скрипт. 4 янв 2019 в 20:02
  • Думаю, это случается после DOMContentLoaded, то есть загрузка картинок и прочего не учитывается, только ДОМ дерево. 6 янв 2019 в 13:22
2

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Пример</title>
<script language="JavaScript">
function startFunction() {
alert("Hi there!");
}
</script>
</head>
<body onload="startFunction()">
</body>
</html>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.