用于选择DOM元素的非特定JS

Question

我通过cors从AJAX获取HTML响应，响应是一个表格。每个类别都有其标题和子元素。标题名称相差很大，未来可能会发生变化。每个标题中的子元素几乎每天都在变化，但DOM结构不会。

有没有一种方法可以摆脱这个if语句并将其替换为不是元素特定的代码？选择DOM元素的一些方法我不知道？

Relevat JS

classifiedFilter: function(response) { 
      var Classified = { 
       ClaAdministrative: [], 
       Paraeducator: [], 
       Clerical: [], 
       Custodial: [], 
       NonRep: [], 
       Maintenance: [], 
       ClaSubstitute: [], 
       Coaching: [] 
      }, 
       response = $(response).find("table tbody tr td").html(); 
      $(response).find("#isHeadType").remove(); 
      $(response).find("font:contains(Open to all)").parent().parent().remove(); 

      //Filter each span title and classify sub items 
      $(response).find("span").parents("tr").each(function() { 

       //Find categories and separate by class 
       var rowtext = $(this).find("span").text(), 
        position = ""; 

       position = rowtext.replace(/-/gi, "").replace(/\s/g, ""); 

       $(this).nextAll("tr").addClass(position); 

       //Push content into Classified 
       ((position === "Administrative") ? $(this).nextUntil(".Paraeducator").each(function() { 
        Classified.ClaAdministrative.push($.trim("<tr>" + $(this).html() + "</tr>")); 
       }) : 
       ((position === "Paraeducator") ? $(this).nextUntil(".Clerical").each(function() { 
        Classified.Paraeducator.push($.trim("<tr>" + $(this).html() + "</tr>")); 
       }) : 
       ((position === "Clerical") ? $(this).nextUntil(".Custodial").each(function() { 
        Classified.Clerical.push($.trim("<tr>" + $(this).html() + "</tr>")); 
       }) : 
       ((position === "Custodial") ? $(this).nextUntil(".NonRep").each(function() { 
        Classified.Custodial.push($.trim("<tr>" + $(this).html() + "</tr>")); 
       }) : 
       ((position === "NonRep") ? $(this).nextUntil(".Maintenance").each(function() { 
        Classified.NonRep.push($.trim("<tr>" + $(this).html() + "</tr>")); 
       }) : 
       ((position === "Maintenance") ? $(this).nextUntil(".Substitute").each(function() { 
        Classified.Maintenance.push($.trim("<tr>" + $(this).html() + "</tr>")); 
       }) : 
       ((position === "Substitute") ? $(this).nextUntil(".Coaching").each(function() { 
        Classified.ClaSubstitute.push($.trim("<tr>" + $(this).html() + "</tr>")); 
       }) : 
       ((position === "Coaching") ? $(this).nextAll().each(function() { 
        Classified.Coaching.push($.trim("<tr>" + $(this).html() + "</tr>")); 
       }) : [])))))))); 
      }); 

      //remove title from array 
      Certificated.Elementary.shift(); 
      Certificated.MiddleSchool.shift(); 
      Certificated.HighSchool.shift(); 
      Certificated.K12.shift(); 
      Certificated.Substitute.shift(); 
    } 

汇总HTML GET响应（添加空格对视觉辅助）

<table border="0" cellspacing="0" cellpadding="0" style="MARGIN-TOP: 10px;"> 
    <tr> 
     <td> 
      <font class="HeadTitle">External Positions: Open to all applicants.</font><br> 
     </td> 
    </tr> 






     <tr> 
      <td height="20" nowrap="nowrap"> 
       <i><span id="ExternalJobs__ctl1_BargainGroup" class="BodyText">Administrative</span></i> 
       <br/><br/> 
      </td> 
     </tr> 

       <tr> 
        <td nowrap="nowrap" style="padding-left:20px;" class="BodyText"> 
          <b><a href='jobs.aspx?id=3660&type=2&int=External'>Administrative Assistant I, Health Tech-Leave Replacement-2 hours - ME1214</a></b> 
        </td> 
       </tr> 






     <tr> 
      <td height="20" nowrap="nowrap"> 
       <i><span id="ExternalJobs__ctl2_BargainGroup" class="BodyText">Paraeducator</span></i> 
       <br/><br/> 
      </td> 
     </tr> 

       <tr> 
        <td nowrap="nowrap" style="padding-left:20px;" class="BodyText"> 
          <b><a href='jobs.aspx?id=3544&type=2&int=External'>Paraeducator, SpEd IP/ELL-6.5hours - MC1223</a></b> 
        </td> 
       </tr> 

       <tr> 
        <td nowrap="nowrap" style="padding-left:20px;" class="BodyText"> 
          <b><a href='jobs.aspx?id=3603&type=2&int=External'>Special Ed Paraeducator, School Adjustment Program (SA-)-6.5 hours - MK1215</a></b> 
        </td> 
       </tr> 






     <tr> 
      <td height="20" nowrap="nowrap"> 
       <i><span id="ExternalJobs__ctl3_BargainGroup" class="BodyText">Clerical</span></i> 
       <br/><br/> 
      </td> 
     </tr>    
       <tr> 
        <td nowrap="nowrap" style="padding-left:20px;" class="BodyText"> 
          <b><a href='jobs.aspx?id=3481&type=2&int=External'>Admin Assistant IV-8 hours - IT1209</a></b> 
        </td> 
       </tr> 







     <tr> 
      <td height="20" nowrap="nowrap"> 
       <i><span id="ExternalJobs__ctl5_BargainGroup" class="BodyText">Non-Rep</span></i> 
       <br/><br/> 
      </td> 
     </tr> 

       <tr> 
        <td nowrap="nowrap" style="padding-left:20px;" class="BodyText"> 
          <b><a href='jobs.aspx?id=2732&type=2&int=External'>Licensed Practical Nurse (Pool position) - 2012LPNPool</a></b> 
        </td> 
       </tr> 

       <tr> 
        <td nowrap="nowrap" style="padding-left:20px;" class="BodyText"> 
          <b><a href='jobs.aspx?id=3472&type=2&int=External'>Certified Occupational/Physical Therapist Assistant- POOL - COTA2012Pool</a></b> 
        </td> 
       </tr> 







     <tr> 
      <td height="20" nowrap="nowrap"> 
       <i><span id="ExternalJobs__ctl7_BargainGroup" class="BodyText">Substitute</span></i> 
       <br/><br/> 
      </td> 
     </tr> 

       <tr> 
        <td nowrap="nowrap" style="padding-left:20px;" class="BodyText"> 
          <b><a href='jobs.aspx?id=26&type=2&int=External'>Substitute Food Service Helpers - FSSub</a></b> 
        </td> 
       </tr> 

       <tr> 
        <td nowrap="nowrap" style="padding-left:20px;" class="BodyText"> 
          <b><a href='jobs.aspx?id=28&type=2&int=External'>Substitute Custodians - MTSub</a></b> 
        </td> 
       </tr> 
</table> 

Answer 1

这似乎等同于你当前的核心代码：

$(this).each(function() { 
    Classified[position].push($.trim("<tr>" + $(this).html() + "</tr>")); 
}); 

[编辑]我没有看到你宣布你的数组，你实际上可能需要这样的：

$(this).each(function() { 
    Classified[position]=Classified[position]||[]; 
    Classified[position].push($.trim("<tr>" + $(this).html() + "</tr>")); 
}); 

[更新]基于评论，此循环每当它遇到一个跨度时更新位置：

var position = ""; 
$(response).find("tr").each(function() { 
    var currentTR=$(this); 
    // catch span if any 
    var rowtext = currentTR.find("span").text().replace(/-/gi, "").replace(/\s/g, ""); 
    if (rowtext) { 
     position = rowtext; 
     Classified[position]=[]; 
    } 
    // Collect rows 
    Classified[position].push("<tr>" + $.trim($(this).html()) + "</tr>"); 
}); 

Answer 2

我想，你可以查找功能使用CSS类名称，而不是标签名。