1
resposta

Pegar uma classe que está dentro do HTML 2 a partir do HTML 1

Tenho um HTML que tem uma DIV. Dentro dessa DIV eu carrego outro HTML. A partir do HTML 1 é possível pegar a classe que está dentro do HTML 2. Estou tentando fazer isso mas não está dando certo.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script src="jquery.js"></script>

</head>

<style>
    .div_principal {
        height: 500px;
        background-color: red;
    }
</style>
<body>
    <button class="botao">Carregar Index2.html</button>
    <div class="div_principal"></div>
    <script>
        $(function() {
            $(".botao").click(carregaHtml);
        });            

        function carregaHtml() {
            $(".div_principal").load("index2.html");

            var divSecundaria = $(".div_secundaria");
            console.log(divSecundaria);
        }
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<style>
    .div_secundaria {
        height: 200px;
        background-color: yellow;
    }
</style>

<body>

    <div class="div_secundaria">
        <p>Classe Secundária</p>
        <a class="link" href="">clique aqui</a>
    </div>
</body>
</html>
1 resposta

Oi Gilberto,

Isso acontece porque o navegador ignora as outras tags <html>, pois só pode existir uma única declaração.

No console do dev tools, pode confirmar esse comportamento.