Как вы перебираете папку с изображениями для публикации в модальном режиме? Имена должны быть указаны в теге привязки)

Question

Мне нужно перебрать этот массив изображений и опубликовать список. Я знаю, что для этого мне нужно написать метод JS, но все, что я пробовал, не сработало.

HTML -

  <li>
    <a href="">White Papers</a>
    <ul id="ai_dropdown" class="rd-navbar-dropdown">
      <li class="rd-navbar-aside-right">
        <a data-toggle="modal" data-target="#myModal" class="white_papers" 
           href="images/WhitePapers/"***.pdf" + "#toolbar=0">WhitePaper 1
        </a>
      </li>
    </ul>
  </li>

Modal -

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true"  width="960" height="600">
  <div class="modal-dialog" width="700px">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
      </div>
      <div class="modal-body">
          <iframe id="iframe" src="" width="100%" height="600px" frameborder="0" allowtransparency="true"></iframe>  
      </div>
    </div>
  </div>
</div>

Javascript для модального -

$("#ai_dropdown li>a").on('click', function(e) {
  var option = $(this).attr('href');
  $('#iframe').attr('src', option);
});

Javascript для неработающих изображений -

var folder = "images/WhitePapers/";

$.ajax({
  url : folder,
    success: function (data) {
      $(data).find("a").attr("href", function (i, val) {
        if( val.match(/\.(pdf)$/) ) { 
          $("body").append( "<a href='"+ folder + val +"'#toolbar=0>" );
        } 
    });
  }
});