1

estoy tratando de crear un json con etiquetas html y sus atributos correspondientes.

<!doctype html>
<html lang="es">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

    <title>test story</title>
  </head>
  <body>
    <div class="container">
        <div class="row">
            <div class="col-md-6">
                <div id="story" class="story">
                    <div class='block-title' style="background:red;color:white;">
                        <h2 class='title' style="font-weight:bold;"> title </h2>
                    </div>
                    <div class='block-image' data-value="value1" data-value2="value2">
                        <img class='foto' src="foto.png" alt=":)" />
                    </div>
                    <div class='block-content'>
                        <p class='texto'>
                            Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creación de las hojas "Letraset", las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum.
                        </p>
                    </div>            
                </div>
            </div>
            <div class="col-md-6">
                <button> generar </button>
            </div>
        </div>    
    </div>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>

    <script src='js/js.js'></script>
  </body>


 <script>

    $(document).ready(function(){    
        gen4('.story div')
    })

 </script> 
</html>

Con este script obtengo el nombre de las etiquetas, y sus atributos pero al ejecutar el script me devuelve todos los atributos, deberia devolverme por cada div y tambien de sus elementos hijos

Debería devolverme en esta forma

tag:'div'
attr:{
   name:'class',value:'block-title'
}
child:{
   tag:'div'
   attr:{
     name:'class', value:'title' 
   }
   child:{

   }
}



function gen4(block){

    var attr = []
    var child = []

    $(block).each(function(){

        // objeto       
        var obj = new Object()
        obj.tag = $(this).prop('tagName')
        obj.attr = attr
        obj.child = child

        $(this.attributes).each(function(index){
            var data = {'name':this.name, 'value':this.value}
            attr.push(data )
        })

        $(this).children().each(function(index, element){
            $(element.attributes).each(function(){
                var data = {'name':this.name, 'value':this.value}
                child.push(data)
            })
        })

       console.log(obj)  

        //var arr = JSON.stringify(obj)
        //console.log(arr)
    })

}   

agradecería sus sugerencias.

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.