Non specific JS for selecting DOM elements

Question

I GET a HTML response from AJAX over cors and the response is a table. Each category has its title and sub elements. The title names vary quite a bit and are likely to change in the future. The sub elements in each title change almost on a daily basis, but the DOM structure doesn't.

Is there a way I could get rid of this if statement and replace it with code that isn't element specific? Some way of selecting DOM elements I'm not aware of?

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();
    }

Summarized HTML GET response (added spaces for visual aid)

    <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>

Christophe · Accepted Answer · 2013-02-12 17:53:30Z

2

This seems equivalent to the core of your current code:

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

[Edit] I don't see where you declare your arrays, you might actually need this:

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

[Update] Based on the comments, this loop updates position whenever it hits a span:

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>" );
});

edited Feb 12, 2013 at 17:53

answered Feb 11, 2013 at 16:51

Christophe

28.3k29 gold badges105 silver badges145 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Jonny Sooter Over a year ago

Yes and no. It does push the content to the array but only pushes the title elements, selected with $(this). It's not selecting and classifying the sub elements of each title. If you notice in the HTML there are <tr>'s under each title element that need to be pushed to their array accordingly.

Christophe Over a year ago

ok, then maybe you should use $(response).find("tr") instead of $(response).find("span").parents("tr") . Also, your $.trim doesn't seem to do anything.

Jonny Sooter Over a year ago

If I .find("tr") it will return all the tr's and then how do I separate them according to the title in the span elements? The trim doesn't seem to do anything here because I made a reduced table for demonstration. The actual content needs to be trimmed.

Christophe Over a year ago

Please allow me to insist. From the jQuery doc: The $.trim() function removes all newlines, spaces (including non-breaking spaces), and tabs from the beginning and end of the supplied string. If these whitespace characters occur in the middle of the string, they are preserved. I think what you actually want is ( "<tr>" + $.trim($(this).html()) + "</tr>" )

Christophe Over a year ago

If you don't want to include the trs with span, use if (rowtext) {...} else {Classified[position].push(...);}

|

dherbolt · Accepted Answer · 2013-02-11 16:42:27Z

0

I think, you can use CSS class names in find function instead of tag names.

answered Feb 11, 2013 at 16:42

dherbolt

2561 silver badge6 bronze badges

2 Comments

Jonny Sooter Over a year ago

I use the tags because the spans with a parent of tr will always be a title tr. These tr's don't have classes on them when they come in the response. Perhaps I'm not following your thoughts. Could you provide an example?

dherbolt Over a year ago

I'm sorry, I didn't notice that you are not able to add classes to elements.

Collectives™ on Stack Overflow

Non specific JS for selecting DOM elements

2 Answers 2

8 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related