Объект из списка HTML - PullRequest
Новая
       3

Объект из списка HTML

1 голос
/ 07 февраля 2012

Каким образом предлагается решить эту проблему?

У меня есть список HTML, например: 

<ul>
  <li><img src="img1.jpg" alt="Image One" /></li>
  <li><img src="img2.jpg" alt="Image Two" /></li>
  <li><img src="img3.jpg" alt="Image Three" /></li>
</ul>

и я хотел бы преобразовать эти данные в объект, что-то вроде: 

{
    images: {
        1: {
            src: "img1.jpg",
            alt: "Image One"
        },
        2: {
            src: "img2.jpg",
            title: "Image Two"
        },
        3: {
            src: "img3.jpg",
            title: "Image Three"
        }
    }
}

Спасибо

Ответы [ 2 ]

2 голосов
/ 07 февраля 2012

Вот один из способов сделать это.

Я объяснил, как это работает в комментариях.

Скажите, пожалуйста, что-то не так с кодом. 

<!DOCTYPE html>
<html>
    <head>
        <title></title>

        <style>
            </style>

    </head>
    <body>


        <ul id="ul">
            <li><img src="img1.jpg" alt="Image One" /></li>
            <li><img src="img2.jpg" alt="Image Two" /></li>
            <li><img src="img3.jpg" alt="Image Three" /></li>
        </ul>


        <script>

            //Get the element that contains the image nodes
            var ul = document.getElementById("ul");

            //create a new 'images' object
            var images = {};


            //Note: this function call returns the image nodes in the order
            //they appear in the ul element. If an li node has 2 images, or no 
            //images, this method of retrieval may not suit your liking.
            var imgNodes = ul.getElementsByTagName("img");


            //Loop through all the image nodes
            for(var i = 0, l = imgNodes.length; i < l; i++) {

                //Add a new object to the images object
                images[i+1+""] = {

                    //getAttribute is a safe way to retrieve the attributes of a node
                    src :   imgNodes[i].getAttribute("src"),
                    alt :   imgNodes[i].getAttribute("alt")

                };

            }

            //Spit it out in the console to make sure it's good.
            console.log(images);


        </script>

    </body>
</html>
1 голос
/ 07 февраля 2012

посмотрите на jQuery .map ()

http://api.jquery.com/map/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...