如何使用JQuery动态填充列表

Question

我有一个登录页面，用于在单击提交按钮后在页面上显示命名工具/表单的结果。结果存储在JSON文件中。

我需要根据输入的字母和类别将JSON文件的结果显示为页面上的无序列表。以下是使用的相关HTML和JQuery：

with open("teste.txt", "w") as f:
    for letter in letters:
        f.write("\nletter " + letter + " and\n")

$(document).ready(function() {
  $('#dnt').submit(function(e) {
    var cat_id = $('.dnt-overlay > select > option:selected').data('id') || 0;
    var cat_title = $('.dnt-overlay > select > option:selected').text() || 'All';
    if (cat_id === 0) {
      cat_title = 'All';
    }
    var dnt_url = $('.dnt-overlay > select > option:selected').val() || '/dog-name-finder/';
    var gender = $('.dnt-overlay > [name=gender]:checked').data('id') || 0;
    var gender_title = $('.dnt-overlay > [name=gender]:checked').val() || 'All';
    var title = cat_title;
    var html = '';

    var params = '';

    if (window.innerWidth <= 320) {
      params = '?limit=18';
    } else {
      params = '?limit=21';
    }


    if (cat_id > 0) {
      params += '&' + 'cat_id=' + cat_id;
    }

    if (gender > 0 && cat_title != 'Gender Agnostic' && cat_title != 'Unisex' && cat_title != 'Male' && cat_title != 'Female') {
      title += ' ' + gender_title;
      params += '&' + 'gender=' + gender;
      if (cat_title == 'All') {
        dnt_url += gender_title.toLowerCase() + '/';
      } else {
        dnt_url += '?gender=' + gender_title.charAt(0).toLowerCase();
      }
    }

    title += ' Dog Names';

    $('#dnt-popup > h1').text(title);
    $('#dnt-popup > .more-btn').find('a').attr('href', dnt_url);

    e.preventDefault(); // We don't need to send the form, because it's all local
    if ($('#male').is(':checked')) { // Check if male is checked
      $('#dnt-popup').removeClass('dnt-all').removeClass('dnt-female').addClass('dnt-male');
    } else if ($('#female').is(':checked')) { // Check if female is checked 
      $('#dnt-popup').removeClass('dnt-all').removeClass('dnt-male').addClass('dnt-female');
    } else if ($('#all').is(':checked')) { // Check if all is checked
      $('#dnt-popup').removeClass('dnt-female').removeClass('dnt-male').addClass('dnt-all');
    }
    $.ajax({
        url: "/dog-name-finder/json/" + params,
      })
      .done(function(data) {

        $.each(data, function(index, value) {
          html += '<li>' + value.title + '</li>';
        });

        $('#dnt-popup > .results-list > ul').html(html);

        $.magnificPopup.open({ // open pop up for male
          items: {
            src: '#dnt-popup',
            type: 'inline'

          }, //item
          mainClass: 'animated slideInRight'
        }); ///popup open


      });




  }); ///submit function 

  $('#dnt-popup > .more-btn > .long-btn > a, #dnt-popup > .more-btn > .short-btn > a').on("click", function() {

    var cat_id = $('.dnt-overlay > select > option:selected').data('id') || 0;
    var cat_title = $('.dnt-overlay > select > option:selected').text() || 'All';
    if (cat_id === 0) {
      cat_title = 'All';
    }

    var gender_title = $('.dnt-overlay > [name=gender]:checked').val() || 'All';


  }); //event for click to DNT landing page

  if ($('.dnt-landing-page').length > 0) {
    $.ajax({
        type: 'GET',
        dataType: "json",
        url: "/dnt.json",
      })
      .done(function(data) {

        var params = {};
        window.location.search
          .replace(/[?&]+([^=&]+)=([^&]*)/gi, function(str, key, value) {
            params[key.toLowerCase()] = value;
          });


        var url_base = window.location.protocol + '//' + window.location.hostname;

        var gender = $('input[name=gender]:checked').data('id') || '';

        var gender_title = $('input[name=gender]:checked').val() || 'All';

        var cat_id = $("div.mid-blackboard > ul > li > a.active").data('id') || '';

        var cat_title = $("div.mid-blackboard > ul > li > a.active").text();

        var url = $("div.mid-blackboard > ul > li > a.active").attr('href');

        var letter = $('input[name=letter]:checked').val() || '';

        var letter_label = letter;

        if (letter_label === '') {
          letter_label = 'no letter selected';
        }

        letter = letter.toUpperCase();

        var page = parseInt(params.p) || 1;

        var totalPages = 0;

        if (page < 1) {
          page = 1;
        }

        var pagesToShow = 5;

        var html = '';

        var match = '';
        var ltest = '';

        var refresh = false;


        $.each(data, function(index, value) {
          html += '<li class="';
          $.each(value.categories, function(index, value) {
            html += value.category_id + ' ';

          });
          html += value.title.charAt(0).toUpperCase() + ' off" style="display:none">' + value.title + '</li>';
        });

        var results = $('.dnt-landing-results > .results-list > ul');

        results.html(html);

        function updateNames(init) {

          var title = '';

          if (cat_title != 'All') {
            title = cat_title;
          }
          if (gender > 0 && cat_title != 'Male' && cat_title != 'Female' && cat_title != 'Gender Agnostic' && cat_title != 'Unisex') {
            title += ' ' + gender_title;
          }

          $('.dnt-landing-heading > h1').text(title + ' Dog Names');

          var share_url = url_base;

          match = '';

          if (cat_id > 0) {
            match += '.' + cat_id;
          }

          if (gender > 0) {
            match += '.' + gender;
          }


          ltest = match;

          if (letter !== '' && results.children(match + '.' + letter).length > 0) {
            match += '.' + letter;
            $('#' + letter.toLowerCase()).attr('disabled', false).prop('checked', true);
          }

          if (init) {
            results.children(match).slice((page - 1) * 45, page * 45).removeClass('off').css('display', '').addClass('on');
          } else {
            results.children('li.on').removeClass('on').css('display', 'none').addClass('off');
            results.children(match).slice((page - 1) * 45, page * 45).removeClass('off').fadeIn("slow").addClass('on');
          }

          totalPages = Math.ceil(results.children(match).length / 45);

          if (totalPages > 1) {
            var pager = '';
            if (page > 1) {
              pager += '<li><button>&lt;</button></li>';
            }

            var pageStart = 1;

            if (totalPages > pagesToShow && page > Math.ceil(pagesToShow / 2)) {
              pageStart = page - Math.ceil(pagesToShow / 2) + 1;

              if (pageStart > (totalPages - pagesToShow + 1)) {
                pageStart = totalPages - pagesToShow + 1;
              }
            }

            var pageEnd = pageStart + pagesToShow - 1;

            if (pageEnd > totalPages) {
              pageEnd = totalPages;
            }

            for (var i = pageStart; i <= pageEnd; i++) {
              pager += '<li';

              if (i == page) {
                pager += ' class="active" ';
              }

              pager += '><button>' + i + '</button></li>';
            }


            if (page < totalPages) {
              pager += '<li><button>&gt;</button></li>';
            }

            $('.results-pager').html(pager).show();

          } else {
            $('.results-pager').hide();
          }

          $('input[name=letter]').each(function() {
            if (results.children(ltest + '.' + $(this).val()).length > 0) {
              $(this).attr('disabled', false);
              if ($(this).val() != letter) {
                $(this).prop('checked', false);
              }
            } else {
              $(this).attr('disabled', true);
              $(this).prop('checked', false);
            }
          });


          share_url += url;
          var del = '?';

          if (gender > 0 && gender != cat_id) {
            if (cat_id > 0) {
              share_url += del + 'gender=' + gender_title.charAt(0).toLowerCase();
              del = '&';
            } else {
              share_url += gender_title.toLowerCase() + '/';
            }
          }

          if (page > 1) {
            share_url += del + 'p=' + page;
            del = '&';
          }

          if (letter !== '' && ltest != match) {
            share_url += del + 'abc=' + letter.toLowerCase();
            del = '&';
          }

          for (var k in params) {

            if (k != 'gender' && k != 'p' && k != 'abc') {
              share_url += del + k + '=' + params[k];
              del = '&';
            }
          }

          document.title = title + ' Dog Names -  Dog Name Finder';

          addthis_share = {
            url: share_url,
            title: title + ' Names -  Dog Name Finder'
          };




          if (!init) {
            history.pushState({}, document.title, share_url);
          }

        } //end updateNames

        updateNames(true);

        $('input[name=letter]').on("click", function() {

          var eventLabel = '';

          if ($(this).is(':checked')) {
            letter = $(this).val() || '';
            letter_label = letter;
            eventLabel = 'clicked ' + letter;
          } else {
            eventLabel = 'unclicked ' + letter;
            letter = '';
            letter_label = 'no letter selected';
          }
          letter = letter.toUpperCase();
          page = 1;
          updateNames();


        });

        $('#reset').on("click", function() {

          $('input[name=letter]:checked').attr('checked', false);
          letter = '';
          letter_label = 'no letter selected';
          page = 1;
          updateNames();

        });

        $('input[name=gender]').on("click", function() {

          gender = $('input[name=gender]:checked').data('id') || '';
          gender_title = $('input[name=gender]:checked').val() || 'All';
          if ((cat_title == 'Male' || cat_title == 'Female' || cat_title == 'All') && cat_title != gender_title) {
            $("div.mid-blackboard > ul > li > a.active").removeClass('active');
            cat_id = $(this).data('id');
            cat_title = gender_title;
            page = 1;
            url = $(this).data('href');
            $("div.mid-blackboard > ul > li > a[data-id=" + cat_id + "]").addClass('active');
            $('#landing-submit').children('option[data-id=' + cat_id + ']').prop('selected', true);
          }
          $('.dnt-gender-dog').css('display', 'none');
          switch (gender_title) {
            case 'Male':
              $('.dnt-gender-dog.male-dog').css('display', '');
              break;
            case 'Female':
              $('.dnt-gender-dog.female-dog').css('display', '');
              break;
            default:
              $('.dnt-gender-dog.unisex-dog').css('display', '');
              break;
          }
          page = 1;
          updateNames();


        });

        $("div.mid-blackboard > ul > li > a").on("click", function(event) {

          event.preventDefault();
          $("div.mid-blackboard > ul > li > a.active").removeClass('active');
          $(this).addClass('active');
          cat_id = $(this).data('id') || 0;
          cat_title = $("div.mid-blackboard > ul > li > a.active").text();
          page = 1;
          url = $(this).attr('href');
          if (cat_title == 'Male') {
            $('#male').prop('checked', true).click();
          } else if (cat_title == 'Female') {
            $('#female').prop('checked', true).click();
          } else if (cat_title == 'All') {
            $('#all').prop('checked', true).click();
          } else {
            updateNames();
          }

          $('#landing-submit').children('option[data-id=' + cat_id + ']').prop('selected', true);


        });

        window.onpopstate = function(event) {
          window.location.href = document.location;
        };

        $('#landing-submit').change(function() {
          cat_id = $('#landing-submit').children('option:SELECTED').data('id') || 0;
          cat_title = $('#landing-submit').children('option:SELECTED').text();
          if (cat_id === 0) {
            cat_title = 'All';
          }
          url = $('#landing-submit').children('option:SELECTED').val();
          page = 1;
          if (cat_title == 'Male') {
            $('#male').prop('checked', true).click();
          } else if (cat_title == 'Female') {
            $('#female').prop('checked', true).click();
          } else if (cat_title == 'All') {
            $('#all').prop('checked', true).click();
          } else {
            updateNames();
          }
          $("div.mid-blackboard > ul > li > a.active").removeClass('active');

          $("div.mid-blackboard > ul > li > a[data-id=" + cat_id + "]").addClass('active');


        });

        $('.results-pager').on("click", "li > button", function() {
          event.preventDefault();
          switch ($(this).text()) {
            case '&lt;':
            case '<':
              page--;
              break;
            case '&gt;':
            case '>':
              page++;
              break;
            default:
              page = $(this).text();
          }
          if (page < 1) {
            page = 1;
          }
          if (page > totalPages) {
            page = totalPages;
          }
          updateNames();
        });

        $('.results-list').on("swipeleft", function() {
          page++;
          if (page > totalPages) {
            page = totalPages;
          }
          updateNames();
        });

$('.results-list').on("swiperight", function() {
          page--;
          if (page < 1) {
            page = 1;
          }
          updateNames();
        });
      });
  }
});

文件中的一些JSON：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="sidebar-left-contents" class="">
  <div class="dog-blackboard"></div>
  <div class="top-blackboard"></div>
  <div class="paw-blackboard"></div>
  <div class="mid-blackboard">
    <h4>DOG NAMES</h4>
    <hr>
    <ul>
      <li><a href="" data-id="0">All</a></li>
      <li>
        <a href="" data-id="" class="active"></a>
      </li>
    </ul>
  </div>
  <div class="bottom-blackboard"></div>
</div>



<form class="dnt-tool-landing" name="dnt-landing" id="dnt-landing">
  <div class="dnt-radio">
    <input type="radio" name="gender" data-id="593" data-href="" value="Male" id="male" checked><label for="male">Male</label>
    <input type="radio" name="gender" data-id="594" data-href="" value="Female" id="female" checked><label for="female">Female</label>
    <input type="radio" name="gender" data-id="0" data-href="" value="All" id="all" checked><label for="all">All</label>
  </div>
  <!-- radio buttons container  -->
  <div class="keypad-wrapper">
    <div class="keypad-buttons">
      <input type="checkbox" value="A" id="a" name="letter" checked><label for="a"></label>
    </div>
    <!-- end of keypad buttons -->
    <div class="keypad-buttons">
      <input type="checkbox" value="B" id="b" name="letter"><label for="b" class="b"></label>
    </div>
    <!-- end of keypad buttons -->
    <div class="keypad-buttons">
      <input type="checkbox" value="C" id="c" name="letter"><label for="c" class="c"></label>
    </div>
    <!-- end of keypad buttons -->
    <div class="keypad-buttons">
      <input type="checkbox" value="D" id="d" name="letter"><label for="d" class="d"></label>
    </div>
    <!-- end of keypad buttons -->
    <div class="keypad-buttons">
      <input type="checkbox" value="E" id="e" name="letter"><label for="e" class="e"></label>
    </div>
    <!-- end of keypad buttons -->
    <div class="keypad-buttons">
      <input type="checkbox" value="F" id="f" name="letter"><label for="f" class="f"></label>
    </div>
    <!-- end of keypad buttons -->
    <div class="keypad-buttons">
      <input type="checkbox" value="G" id="g" name="letter"><label for="g" class="g"></label>
    </div>
    <!-- end of keypad buttons -->
    <div class="keypad-buttons">
      <input type="checkbox" value="H" id="h" name="letter"><label for="h" class="h"></label>
    </div>
    <!-- end of keypad buttons -->
    <div class="keypad-buttons">
      <input type="checkbox" value="I" id="i" name="letter"><label for="i" class="i"></label>
    </div>
    <!-- end of keypad buttons -->
    <div class="keypad-buttons">
      <input type="checkbox" value="J" id="j" name="letter"><label for="j" class="j"></label>
    </div>
    <!-- end of keypad buttons -->
    <div class="keypad-buttons">
      <input type="checkbox" value="K" id="k" name="letter"><label for="k" class="k"></label>
    </div>
    <!-- end of keypad buttons -->
    <div class="keypad-buttons">
      <input type="checkbox" value="L" id="l" name="letter"><label for="l" class="l"></label>
    </div>
    <!-- end of keypad buttons -->
    <div class="keypad-buttons">
      <input type="checkbox" value="M" id="m" name="letter"><label for="m" class="m"></label>
    </div>
    <!-- end of keypad buttons -->
    <div class="keypad-buttons">
      <input type="checkbox" value="N" id="n" name="letter"><label for="n" class="n"></label>
    </div>
    <!-- end of keypad buttons -->
    <div class="keypad-buttons">
      <input type="checkbox" value="O" id="o" name="letter"><label for="o" class="o"></label>
    </div>
    <!-- end of keypad buttons -->
    <div class="keypad-buttons">
      <input type="checkbox" value="P" id="p" name="letter"><label for="p" class="p"></label>
    </div>
    <!-- end of keypad buttons -->
    <div class="keypad-buttons">
      <input type="checkbox" value="Q" id="q" name="letter"><label for="q" class="q"></label>
    </div>
    <!-- end of keypad buttons -->
    <div class="keypad-buttons">
      <input type="checkbox" value="R" id="r" name="letter"><label for="r" class="r"></label>
    </div>
    <!-- end of keypad buttons -->
    <div class="keypad-buttons">
      <input type="checkbox" value="S" id="s" name="letter"><label for="s" class="s"></label>
    </div>
    <!-- end of keypad buttons -->
    <div class="keypad-buttons">
      <input type="checkbox" value="T" id="t" name="letter"><label for="t" class="t"></label>
    </div>
    <!-- end of keypad buttons -->
    <div class="keypad-buttons">
      <input type="checkbox" value="U" id="u" name="letter"><label for="u" class="u"></label>
    </div>
    <!-- end of keypad buttons -->
    <div class="keypad-buttons">
      <input type="checkbox" value="V" id="v" name="letter"><label for="v" class="v"></label>
    </div>
    <!-- end of keypad buttons -->
    <div class="keypad-buttons">
      <input type="checkbox" value="W" id="w" name="letter"><label for="w" class="w"></label>
    </div>
    <!-- end of keypad buttons -->
    <div class="keypad-buttons">
      <input type="checkbox" value="X" id="x" name="letter"><label for="x" class="x"></label>
    </div>
    <!-- end of keypad buttons -->
    <div class="keypad-buttons">
      <input type="checkbox" value="Y" id="y" name="letter"><label for="y" class="y"></label>
    </div>
    <!-- end of keypad buttons -->
    <div class="keypad-buttons">
      <input type="checkbox" value="Z" id="z" name="letter"><label for="z" class="z"></label>
    </div>
    <!-- end of keypad buttons -->
  </div>
  <!-- keypad wrapper -->
  <div class="reset-button">
    <input type="button" value="Clear Letter Selection" id="reset">
  </div>
  <!-- reset button -->
  <select id="landing-submit">
                        <option value="" data-id="0">Select a Category</option>
                        <option value="" data-id="0">All</option>

                        <option value="" data-id=""> </option>
                    </select>
</form>

<div class="results-list">
  <ul>
    <li id=""></li>
    <link rel="prev" href="">
  </ul>
  <div class="dnt-results-img">
    <img src="male.png" class="dnt-gender-dog male-dog">
    <img src="female.png" class="dnt-gender-dog female-dog">
    <img src="all.png" class="dnt-gender-dog unisex-dog">
  </div>
</div>

<ul class="results-pager" style="display:none'">

</ul>
<!-- results-pager -->
</div>