Using .load to fetch specific lists

/ What I'm trying to do is load certain lists in a file (template) across multiple pages. I want to have a template file with all the lists that I can edit and affect all the lists on all pages. What I think I need to do is use .load to fetch the lists. I tried the code provided on this page titled "Loading other page list items into an ordered list". But I cannot understand what I need. I cannot use php as my host does not support it (github)

   $( "#new-projects" ).load( "/ #Colors li" );
   $( "#new-projects" ).load( "/ #Numbers li" );
   $( "#new-projects" ).load( "/ #Misc li" );
      

<ol id="new-projects">List:</ol>
<ol id="new-projects">List:</ol>
<ol id="new-projects">List:</ol>


My Template List file (listtemplate.html)

<div id="Colors">
        <li>blue</li>
        <li>black</li>
        <li>white</li>
      </div>
      
      <div id="Numbers">
        <li>one</li>
        <li>two</li>
        <li>three</li>
      </div>

      <div id="Misc">
        <li>House</li>
        <li>Rake</li>
        <li>Hat</li>
      </div>
      
      

Run codeHide result


The code used on the .load info site that I want to use to highlight a specific list.

   $( "#new-projects" ).load( "/resources/load.html #projects li" );

      

+3


source to share





All Articles