Я пытаюсь использовать jQuery, чтобы скрыть div, но проблема в том, что ни один из моих элементов внутри тела не может быть найден. Даже когда я пробовал этот код, я получаю только границу вокруг элемента body

$('*').css("border","1px solid red")

Вот мой исходный файл

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <link rel="shortcut icon" type="image/x-icon" href="http://www.msrinvestments.com/favicon1.ico"/>
        <title>MSR Investments</title>
        <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
        <link data-turbonlinks-track="true" href="/assets/application.css?body=1" media="screen" rel="stylesheet" />
        <script src="/assets/jquery.js?body=1"></script>
<script src="/assets/jquery_ujs.js?body=1"></script>
<script src="/assets/turbolinks.js?body=1"></script>
<script src="/assets/all/home.js?body=1"></script>
<script src="/assets/all/idx_maps.js?body=1"></script>
<script src="/assets/all/idx_types.js?body=1"></script>
<script src="/assets/all/indices.js?body=1"></script>
<script src="/assets/all/type_maps.js?body=1"></script>
<script src="/assets/application.js?body=1"></script>
        <meta name="description" content="" />
        <meta name="keywords" content="" />

        <meta name="robots" content="index,follow" />

        <meta name="copyright" content="© 2013 MSR Investments" />
         <style></style>
    </head>

    <body >
        <div id="content" >
            <div id="logo">
                <a href="/"><img alt="Logo" src="/assets/logo.png" title="MSR Investments" /></a>
            </div>

            <nav>
                <img alt="Shadeimg9" src="/assets/shadeimg9.png" />
                <a href="/">HOME</a>
                <a href="/idx_types">SELECT AN INDEX</a>
                <a href="/indices">INDEX PORTFOLIO</a>
                <a href="">ABOUT INDICES</a>

                <a href="contact/contact.html">CONTACT</a>      
            </nav>

            <div id="main">
                <div id="backpic">
    <div id="pitch">
        <p>Find an investable index that suits your needs.</p> 
        <a class="button" href="/idx_types">Get Started</a>
    </div>
</div>
            </div>
            <div id="clear"></div>
            <div id="footer">
                <a href="mailto: info@msrinvestments.com"> asdf </a>
            </div>
        </div>
    </body>
</html>

Предыдущий код настройки границы - единственное, что есть в файлах js. Все они находятся в правильном месте в подпапке «все». Я вижу только красную рамку вокруг элемента body. Когда я пытаюсь выбрать другие элементы по идентификатору или классу, ничего не происходит. Я даже попытался полностью очистить свои файлы css и все равно ничего. Любые идеи?

0
jhlu87 3 Янв 2014 в 03:25

2 ответа

Лучший ответ

Все ваши скрипты загружаются в раздел <head>. Это означает, что они анализируются и запускаются ДО того, как будет проанализирован какой-либо HTML в разделе <body>, и, таким образом, в <body> пока ничего не будет. Вы можете либо дождаться загрузки документа, прежде чем выполнять свои скрипты с таким кодом:

$(document).ready(function() {
    // put your jQuery or javascript code here that can operate on all 
    //     DOM elements present in the HTML of the page
});

Или вы можете переместить свои теги <script> прямо перед тегом </body>, чтобы все, что было до этого, уже было в DOM при запуске ваших скриптов.

P.S. Я очень сомневаюсь, что вам действительно нужна красная рамка вокруг каждого элемента на странице. Надеюсь, это было просто для тестирования. Вы также можете рассмотреть возможность использования правил CSS в таблице стилей вместо применения стилей с JS.

0
jfriend00 2 Янв 2014 в 23:46

Попробуйте вызвать все элементы с помощью javascript:

var elements = document.getElementsByTagName("*");
0
Güven Altuntaş 2 Янв 2014 в 23:30