JQ traverses the implementation of the scene

“This is the 23rd day of my participation in the First Challenge 2022. For details: First Challenge 2022”

JQ implements weather forecast data binding scenarios

Scenario requires

Scenario requires JQ we use data binding to the position as shown in the following two figures, from the point of code base, we need to use the JQ traversal simply reached our goals, if you don’t use the JQ traversal can cause we need a box of a box to assignment, code redundancy, it also shows the importance of JQ traversal.

Scenario implementation

1. Request data, here we are provided with a JSON file data set, so we need to use JQ get method to get

    $.ajax({
           type:"GET",
           url:" /js/weather.json",
           dataType:"json",
    })
   Copy the code

2. After obtaining the data, we will test our proficiency in JQ traversal, because its HTML structure is as follows. At this time, we need to consider how to efficiently traverse the data into the DOM

   <div class="item" id="Monday">
          <img src="">
          <div class="item-mess">
               <div></div>
               <div></div>
               <div></div>
               <div>
                     <span></span>
                     <span></span>
                </div>
           </div>
   </div>
   Copy the code

3. Bind to the specific main DOM, because each of our identical boxes is bound by class=item, so define variables to bind to each box first

   days = $(".item")
   Copy the code

4. After binding the main DOM, we can start to loop through the acquired data. The nodes under item also have a specific hierarchy, so we need to consider this problem. Eq method is a function to select sub-items in JQ traversal, for example, we select the ith box below

   day = days.eq(i)
   Copy the code

5. The following is the problem of binding images. Children is used to traverse the image img under the day node, and attr is used to bind attributes

   img = day.children("img")
   img.attr("src",res[i].weather_icon)
   Copy the code

6. Because there’s another layer of item-mess wrapped around the other data under the item node, so we’re going to go over to item-mess again

   item_mess = day.children(".item-mess")
   Copy the code

7. Since there are several more boxes under the item-mess node, we define another variable to represent these boxes, and then we can use eq to bind the boxes under this node to the class

   texts = item_mess.children()
   texts.eq(0).text(res[i].weather)
   texts.eq(1).text(res[i].temperature)
   texts.eq(2).text(res[i].winp)
   Copy the code

8. Similarly, since there are still two spans under the box node assigned with class value, we need to find spans under children through the texts assigned above and assign them through eq

   dates = texts.eq(3).children()
   dates.eq(0).text(res[i].days)
   dates.eq(1).t
   Copy the code

conclusion

From the above code, if we do not use JQ traversal, we need to assign class to all the nodes of these boxes, and then use JQ to fetch each node to perform the assignment. Therefore, it can save a lot of work to master traversal, but it can be a lot of work around.