动态处理从属选项卡

Question

我正在使用bootstrap在我的页面上创建一个标签式界面。从功能上来说，我按照我喜欢的方式工作但是我已经硬编码并且复制了很多代码，这些代码可以更好地动态处理。我想选择扩展我的奴隶标签。如果我要使用当前的设置来执行此操作，我将会有更多重复的代码。

这是我到目前为止所做的：

  <section>
    <div class="col-xs-12 col-sm-6 col-md-12 col-lg-12 col-xl-12">
      <br />

      <ul class="nav nav-tabs">
        <li class="nav-item">
          <a href="#run" class="nav-link active" role="tab" data-toggle="tab">Run</a>
        </li>
        <li class="nav-item">
          <a href="#master" class="nav-link" role="tab" data-toggle="tab">Master</a>
        </li>
        <li class="nav-item">
          <a href="#slave1" class="nav-link" role="tab" data-toggle="tab">Slave 1</a>
        </li>
        <li class="nav-item">
          <a href="#slave2" class="nav-link" role="tab" data-toggle="tab">Slave 2</a>
        </li>
        <li class="nav-item">
          <a href="#slave3" class="nav-link" role="tab" data-toggle="tab">Slave 3</a>
        </li>
      </ul>

      <div class="tab-content">
        <div role="tabpanel" class="tab-pane active" id="run">
          <div>
            {% for spkVersion, spkObject in results %}
              {% for sVersion, sObject in spkObject %}
                {% for jobRun in sObject.jobRuns %}
                  <div class="fontSize14 margin20 marginBottom5">
                    <span class="bold">Run #{{ jobRun.runNumber }}</span>
                    <span class="monospace" style="margin-left: 50px;">{{ jobRun.jobRunId }}-{{ jobRun.jobType }}.log</span>
                  </div>
                  <div data-jobRunId="{{ jobRun.jobRunId }}" class="jobRunLogContainer monospace fullWidth grayContainer padding10 margin20 marginTop0">
                Loading log file...
                  </div>
                {% endfor %}
              {% endfor %}
            {% endfor %}
          </div>
        </div>
        <div role="tabpanel" class="tab-pane" id="master">
          {% for spkVersion, spkObject in results %}
            {% for sVersion, sObject in spkObject %}
              {% for jobRun in sObject.jobRuns %}
                <div class="fontSize14 margin20 marginBottom5">
                  <span class="bold">Run #{{ jobRun.runNumber }}</span>
                  <span class="monospace" style="margin-left: 50px;">{{ jobRun.jobRunId }}-master.log</span>
                </div>
                <div data-jobRunId="{{ jobRun.jobRunId }}" class="jobRunLogContainer2 monospace fullWidth grayContainer padding10 margin20 marginTop0">
                  Loading log file...
                </div>
              {% endfor %}
            {% endfor %}
          {% endfor %}
        </div>
        <div role="tabpanel" class="tab-pane" id="slave1">
          {% for spkVersion, spkObject in results %}
            {% for sVersion, sObject in spkObject %}
              {% for jobRun in sObject.jobRuns %}
                <div class="fontSize14 margin20 marginBottom5">
                  <span class="bold">Run #{{ jobRun.runNumber }}</span>
                  <span class="monospace" style="margin-left: 50px;">{{ jobRun.jobRunId }}-slave1.log</span>
                </div>
                <div data-jobRunId="{{ jobRun.jobRunId }}" class="jobRunLogContainer3 monospace fullWidth grayContainer padding10 margin20 marginTop0">
                  Loading log file...
                </div>
              {% endfor %}
            {% endfor %}
          {% endfor %}
        </div>
        <div role="tabpanel" class="tab-pane" id="slave2">
          {% for spkVersion, spkObject in results %}
            {% for sVersion, sObject in spkObject %}
              {% for jobRun in sObject.jobRuns %}
                <div class="fontSize14 margin20 marginBottom5">
                  <span class="bold">Run #{{ jobRun.runNumber }}</span>
                  <span class="monospace" style="margin-left: 50px;">{{ jobRun.jobRunId }}-slave2.log</span>
                </div>
                <div data-jobRunId="{{ jobRun.jobRunId }}" class="jobRunLogContainer4 monospace fullWidth grayContainer padding10 margin20 marginTop0">
                  Loading log file...
                </div>
              {% endfor %}
            {% endfor %}
          {% endfor %}
        </div>
        <div role="tabpanel" class="tab-pane" id="slave3">
          {% for spkVersion, spkObject in results %}
            {% for sVersion, sObject in spkObject %}
              {% for jobRun in sObject.jobRuns %}
                <div class="fontSize14 margin20 marginBottom5">
                  <span class="bold">Run #{{ jobRun.runNumber }}</span>
                  <span class="monospace" style="margin-left: 50px;">{{ jobRun.jobRunId }}-{{ this.slaveId }}.log</span>
                </div>
                <div data-jobRunId="{{ jobRun.jobRunId }}" class="jobRunLogContainer5 monospace fullWidth grayContainer padding10 margin20 marginTop0">
                  Loading log file...
                </div>
              {% endfor %}
            {% endfor %}
          {% endfor %}
      </div>
      </div>
    </div>
  </section>

{% endblock %}

{% block pageScript %}
  <script>
    //run log
    $(document).ready(function(){
      $(".jobRunLogContainer").each(function( index ) {
        var jobRunLogContainer = $(this);
        var jobRunId = $(this).attr("data-jobRunId");
        var url = "/api/jobs/jobRuns/" + jobRunId + "/logfile";
        $.ajax({
          url: url,
          type: 'GET',
          error: function(XMLHttpRequest, textStatus, errorThrown){
            jobRunLogContainer.html("ERROR: Log file not found");
          },
          success: function(data){
            jobRunLogContainer.html(data);
          }
        });
      });
    });

    //master log
    $(document).ready(function(){
      $(".jobRunLogContainer2").each(function( index ) {
        var jobRunLogContainer2 = $(this);
        var jobRunId = $(this).attr("data-jobRunId");
        var url = "/api/jobs/jobRuns/" + jobRunId + "/logfilemaster";
        $.ajax({
          url: url,
          type: 'GET',
          error: function(XMLHttpRequest, textStatus, errorThrown){
            jobRunLogContainer2.html("ERROR: Log file not found");
          },
          success: function(data){
            jobRunLogContainer2.html(data);
          }
        });
      });
    });

    //slave1 log
    $(document).ready(function(){
      $(".jobRunLogContainer3").each(function( index ) {
        var jobRunLogContainer3 = $(this);
        var jobRunId = $(this).attr("data-jobRunId");
        var slaveId = "slave1";
        var url = "/api/jobs/jobRuns/" + jobRunId + "/logfileslave/" + slaveId;
        $.ajax({
          url: url,
          type: 'GET',
          error: function(XMLHttpRequest, textStatus, errorThrown){
            jobRunLogContainer3.html("ERROR: Log file not found");
          },
          success: function(data){
            jobRunLogContainer3.html(data);
          }
        });
      });
    });

    //slave2 log
    $(document).ready(function(){
      $(".jobRunLogContainer4").each(function( index ) {
        var jobRunLogContainer4 = $(this);
        var jobRunId = $(this).attr("data-jobRunId");
        var slaveId = "slave2";
        var url = "/api/jobs/jobRuns/" + jobRunId + "/logfileslave/" + slaveId;
        $.ajax({
          url: url,
          type: 'GET',
          error: function(XMLHttpRequest, textStatus, errorThrown){
            jobRunLogContainer4.html("ERROR: Log file not found");
          },
          success: function(data){
            jobRunLogContainer4.html(data);
          }
        });
      });
    });

    //slave3 log
    $(document).ready(function(){
      $(".jobRunLogContainer5").each(function( index ) {
        var jobRunLogContainer5 = $(this);
        var jobRunId = $(this).attr("data-jobRunId");
        var slaveId = "slave2";
        var url = "/api/jobs/jobRuns/" + jobRunId + "/logfileslave/" + slaveId;
        $.ajax({
          url: url,
          type: 'GET',
          error: function(XMLHttpRequest, textStatus, errorThrown){
            jobRunLogContainer5.html("ERROR: Log file not found");
          },
          success: function(data){
            jobRunLogContainer5.html(data);
          }
        });
      });
    });
  </script>
{% endblock %}

我从hosts文件中找到了这样的药膏：

xxx.xxx.xxx.xxx slave1
xxx.xxx.xxx.xxx slave2
xxx.xxx.xxx.xxx slave3

是否可以从hosts文件中获取slave标签名称，还可以使用一个函数而不是3来显示当前设置的从属日志文件吗？

添加输出HTML

<!doctype html>

<html lang="en">
  <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />

<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>

    <link href="/css/main.css" rel="stylesheet" type="text/css" />
  </head>

  <body>
    <header>
      <h1>Runner</h1>
    </header>

    <div class="contentWrapper">

  <h2>Job Log</h2>
  <section>
    <div class="col-xs-12 col-sm-6 col-md-12 col-lg-12 col-xl-12">
      <br />

      <ul class="nav nav-tabs">
        <li class="nav-item">
          <a href="#run" class="nav-link active" role="tab" data-toggle="tab">Run</a>
        </li>
        <li class="nav-item">
          <a href="#master" class="nav-link" role="tab" data-toggle="tab">Master</a>
        </li>
        <li class="nav-item">
          <a href="#slave1" class="nav-link" role="tab" data-toggle="tab">slave 1</a>
        </li>
        <li class="nav-item">
          <a href="#slave2" class="nav-link" role="tab" data-toggle="tab">slave 2</a>
        </li>
        <li class="nav-item">
          <a href="#slave3" class="nav-link" role="tab" data-toggle="tab">slave 3</a>
        </li>
      </ul>

      <div class="tab-content">
        <div role="tabpanel" class="tab-pane active" id="run">
          <div>



                  <div class="fontSize14 margin20 marginBottom5">
                    <span class="bold">Run #1</span>
                    <span class="monospace" style="margin-left: 50px;">1-teragen.log</span>
                  </div>
                  <div data-jobRunId="1" class="jobRunLogContainer monospace fullWidth grayContainer padding10 margin20 marginTop0">
                    Loading log file...
                  </div>



          </div>
        </div>
        <div role="tabpanel" class="tab-pane" id="master">



                <div class="fontSize14 margin20 marginBottom5">
                  <span class="bold">Run #1</span>
                  <span class="monospace" style="margin-left: 50px;">1-master.log</span>
                </div>
                <div data-jobRunId="1" class="jobRunLogContainer2 monospace fullWidth grayContainer padding10 margin20 marginTop0">
                  Loading log file...
                </div>



        </div>
        <div role="tabpanel" class="tab-pane" id="slave1">



                <div class="fontSize14 margin20 marginBottom5">
                  <span class="bold">Run #1</span>
                  <span class="monospace" style="margin-left: 50px;">1-slave1.log</span>
                </div>
                <div data-jobRunId="1" class="jobRunLogContainer3 monospace fullWidth grayContainer padding10 margin20 marginTop0">
                  Loading log file...
                </div>



        </div>
        <div role="tabpanel" class="tab-pane" id="slave2">



                <div class="fontSize14 margin20 marginBottom5">
                  <span class="bold">Run #1</span>
                  <span class="monospace" style="margin-left: 50px;">1-slave2.log</span>
                </div>
                <div data-jobRunId="1" class="jobRunLogContainer4 monospace fullWidth grayContainer padding10 margin20 marginTop0">
                  Loading log file...
                </div>



        </div>
        <div role="tabpanel" class="tab-pane" id="slave3">



                <div class="fontSize14 margin20 marginBottom5">
                  <span class="bold">Run #1</span>
                  <span class="monospace" style="margin-left: 50px;">1-.log</span>
                </div>
                <div data-jobRunId="1" class="jobRunLogContainer5 monospace fullWidth grayContainer padding10 margin20 marginTop0">
                  Loading log file...
                </div>



      </div>
      </div>
    </div>
  </section>


    </div>
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>

  <script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
  <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>

  <script>
$(document).ready(function(){
  $("body").on("click", ".backToMain", function(){
    window.location = "/jobs";
  });
});
  </script>


  <script>
    //run log
    $(document).ready(function(){
      $(".jobRunLogContainer").each(function( index ) {
        var jobRunLogContainer = $(this);
        var jobRunId = $(this).attr("data-jobRunId");
        var url = "/api/jobs/jobRuns/" + jobRunId + "/logfile";
        $.ajax({
          url: url,
          type: 'GET',
          error: function(XMLHttpRequest, textStatus, errorThrown){
            jobRunLogContainer.html("ERROR: Log file not found");
          },
          success: function(data){
            jobRunLogContainer.html(data);
          }
        });
      });
    });

    //master log
    $(document).ready(function(){
      $(".jobRunLogContainer2").each(function( index ) {
        var jobRunLogContainer2 = $(this);
        var jobRunId = $(this).attr("data-jobRunId");
        var url = "/api/jobs/jobRuns/" + jobRunId + "/logfilemaster";
        $.ajax({
          url: url,
          type: 'GET',
          error: function(XMLHttpRequest, textStatus, errorThrown){
            jobRunLogContainer2.html("ERROR: Log file not found");
          },
          success: function(data){
            jobRunLogContainer2.html(data);
          }
        });
      });
    });

    //slave1 log
    $(document).ready(function(){
      $(".jobRunLogContainer3").each(function( index ) {
        var jobRunLogContainer3 = $(this);
        var jobRunId = $(this).attr("data-jobRunId");
        var slaveId = "slave1";
        var url = "/api/jobs/jobRuns/" + jobRunId + "/logfileslave/" + slaveId;
        $.ajax({
          url: url,
          type: 'GET',
          error: function(XMLHttpRequest, textStatus, errorThrown){
            jobRunLogContainer3.html("ERROR: Log file not found");
          },
          success: function(data){
            jobRunLogContainer3.html(data);
          }
        });
      });
    });

    //slave2 log
    $(document).ready(function(){
      $(".jobRunLogContainer4").each(function( index ) {
        var jobRunLogContainer4 = $(this);
        var jobRunId = $(this).attr("data-jobRunId");
        var slaveId = "slave2";
        var url = "/api/jobs/jobRuns/" + jobRunId + "/logfileslave/" + slaveId;
        $.ajax({
          url: url,
          type: 'GET',
          error: function(XMLHttpRequest, textStatus, errorThrown){
            jobRunLogContainer4.html("ERROR: Log file not found");
          },
          success: function(data){
            jobRunLogContainer4.html(data);
          }
        });
      });
    });

    //slave3 log
    $(document).ready(function(){
      $(".jobRunLogContainer5").each(function( index ) {
        var jobRunLogContainer5 = $(this);
        var jobRunId = $(this).attr("data-jobRunId");
        var slaveId = "slave3";
        var url = "/api/jobs/jobRuns/" + jobRunId + "/logfileslave/" + slaveId;
        $.ajax({
          url: url,
          type: 'GET',
          error: function(XMLHttpRequest, textStatus, errorThrown){
            jobRunLogContainer5.html("ERROR: Log file not found");
          },
          success: function(data){
            jobRunLogContainer5.html(data);
          }
        });
      });
    });
  </script>

</html>