CODEWITHSUNDEEP
javascriptjqueryhtml
Momin Zahid
Momin Zahid

Reputation: 406

JQuery returning number of children more than what exist

So the problem I'm having is that my jQuery code is somehow detecting more children than there exist in for an element. I'll do my best to explain what I'm trying to do. I have a table in the following format: 

 <table>
                        <!-- BEGIN SECTION: General Attributes -->
                        <tbody class="tableHeadings">
                            <tr>
                                <th colspan="2">
                                    <hr />
                                    <h3 class="tableSectionHeader">General Characteristics</h3>
                                    <hr />
                                </th>
                            </tr>
                            <tr>
                                <th class="library-card-header" id="venue">Venue</th>
                                <td></td>
                            </tr>
                            <tr>
                                <th class="library-card-header" id="pubYear">Publication Year</th>
                                <td></td>
                            </tr>
                            <tr>
                                <th class="library-card-header" id="abstract">Abstract</th>
                                <td></td>
                            </tr>

                            <tr>
                                <th class="library-card-header" id="author">Authors</th>
                                <td></td>
                            </tr>
                            <tr>
                                <th class="library-card-header" id="url">URL</th>
                                <td></td>
                            </tr>
                            <tr>
                                <th class="library-card-header" id="researchQuestions">Research Question</th>
                                <td></td>
                            </tr>
                            <tr>
                                <th class="library-card-header" id="experienceDescription">Experience Description</th>
                                <td></td>
                            </tr>
                            <tr>
                                <th class="library-card-header" id="whatMeasured">What Measured</th>
                                <td></td>
                            </tr>
                            <tr>
                                <th class="library-card-header" id="howMeasured">How Measured</th>
                                <td></td>
                            </tr>
                            <tr>
                                <th class="library-card-header" id="articleEvaluationTool">Evaluation Tool Used</th>
                                <td></td>
                            </tr>
                            <tr>
                                <th class="library-card-header" id="reportType">Report Type</th>
                                <td></td>
                            </tr>
                            <tr>
                                <th class="library-card-header" id="studyDesign">Study Design</th>
                                <td></td>
                            </tr>
                            <tr>
                                <th class="library-card-header" id="researchApproach">Research Approach</th>
                                <td></td>
                            </tr>
                        </tbody>


<tbody class="tableHeadings durationHeader">
                            <tr>
                                <th colspan="2">
                                    <hr />
                                    <h3 class="tableSectionHeader">Duration Information</h3>
                                    <hr />
                                </th>
                            </tr>
                            <tr>
                                <th class="library-card-header" id="years">Total Years</th>
                                <td></td>
                            </tr>
                            <tr>
                                <th class="library-card-header" id="semesters">Total Semesters</th>
                                <td></td>
                            </tr>
                            <tr>
                                <th class="library-card-header" id="months">Total Months</th>
                                <td></td>
                            </tr>
                            <tr>
                                <th class="library-card-header" id="weeks">Total Weeks</th>
                                <td></td>
                            </tr>
                            <tr>
                                <th class="library-card-header" id="days">Total Days</th>
                                <td></td>
                            </tr>
                            <tr>
                                <th class="library-card-header" id="hours">Total Hours</th>
                                <td></td>
                            </tr>
                            <tr>
                                <th class="library-card-header" id="minutes">Total Minutes</th>
                                <td></td>
                            </tr>
                            <tr>
                                <th class="library-card-header" id="daysPerWeek">Days Per Week</th>
                                <td></td>
                            </tr>
                            <tr>
                                <th class="library-card-header" id="hoursPerDay">Hours Per Day</th>
                                <td></td>
                            </tr>
                            <tr>
                                <th class="library-card-header" id="minutesPerDay">Minutes Per Day</th>
                                <td></td>
                            </tr>   
                        </tbody>

</table>

What I'm doing is using JS to populate the td's with the relative information if it exists in the database. If it doesn't I'm removing the tr altogether so it doesn't show up at all on the page (rather than showing up with just heading and no information). The populating part is working seamlessly. However, removing the sections which have no data is not working for only the section 'duration header'.

The JS code I wrote to achieve this is: 

jQuery("th").each(function(item){

    var idAttribute = jQuery(this).attr("id");
    var result = data[idAttribute];
    if(result == undefined || result.length == 0) {

        // Remove any element that has no data. Skip over the section headers.
        if (idAttribute !== undefined)
            jQuery(this).parent().remove();
        return;
    }

    // Remove any duration information with a zero value.
    if (isDurationAttr(idAttribute))
    {
        if (result === 0)
        {
            jQuery(this).parent().remove();
            return;
        }

    }

    jQuery('.tableHeadings').each(function() {
    //  console.log(jQuery(this).children().length);
        if (jQuery(this).children().length == 1) {
            jQuery(this).remove();  
            return;
        }
    });
    var tree = jQuery(".durationHeader").map(function(){
        return this.innerHTML;
    }).get().join(", ");

    console.log(tree);
});

While debugging this, I tried to print out the number of children in the last part and then the html that is in the durationHeader section.

the method 

    jQuery('.tableHeadings').each(function() {
    //  console.log(jQuery(this).children().length);
        if (jQuery(this).children().length == 1) {
            jQuery(this).remove();  
            return;
        }
    });

should essentially get rid of the durationHeader section. However, when I print out the html, its showing all the elements. For some very weird reason, this is not happening for the first tbody, which is also a class tableHeadings. When I printed out the children in durationHeader, it says that the element has 11 children. It should have only 1, which is the heading of that section.

Can someone please look into this and tell me what is going on? I've been stuck on this for 2 days now.

Upvotes: 0

Views: 42

Answers (1)

Ivan
Ivan

Reputation: 40678

Look closely your first tbody has 14 tr elements while the second tbody has 11. The code is working fine. Tell me if that's not what you were looking for.

Edit: I think I know what you're not understanding: jQuery('.tableHeadings') contains two elements, the two elements with class name .tableHeadings. So when you apply each you're not looping through each child of the table portion, you're looping through each table portion (here there are two). Therefore accessing children will get you the tr elements instead of the child of the first tr: th.

jQuery('.tableHeadings').each(function() {
  console.log(jQuery(this).children().length);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <!-- BEGIN SECTION: General Attributes -->
  <tbody class="tableHeadings">
    <tr>
      <th colspan="2">
        <hr />
        <h3 class="tableSectionHeader">General Characteristics</h3>
        <hr />
      </th>
    </tr>
    <tr>
      <th class="library-card-header" id="venue">Venue</th>
      <td></td>
    </tr>
    <tr>
      <th class="library-card-header" id="pubYear">Publication Year</th>
      <td></td>
    </tr>
    <tr>
      <th class="library-card-header" id="abstract">Abstract</th>
      <td></td>
    </tr>

    <tr>
      <th class="library-card-header" id="author">Authors</th>
      <td></td>
    </tr>
    <tr>
      <th class="library-card-header" id="url">URL</th>
      <td></td>
    </tr>
    <tr>
      <th class="library-card-header" id="researchQuestions">Research Question</th>
      <td></td>
    </tr>
    <tr>
      <th class="library-card-header" id="experienceDescription">Experience Description</th>
      <td></td>
    </tr>
    <tr>
      <th class="library-card-header" id="whatMeasured">What Measured</th>
      <td></td>
    </tr>
    <tr>
      <th class="library-card-header" id="howMeasured">How Measured</th>
      <td></td>
    </tr>
    <tr>
      <th class="library-card-header" id="articleEvaluationTool">Evaluation Tool Used</th>
      <td></td>
    </tr>
    <tr>
      <th class="library-card-header" id="reportType">Report Type</th>
      <td></td>
    </tr>
    <tr>
      <th class="library-card-header" id="studyDesign">Study Design</th>
      <td></td>
    </tr>
    <tr>
      <th class="library-card-header" id="researchApproach">Research Approach</th>
      <td></td>
    </tr>
  </tbody>


  <tbody class="tableHeadings durationHeader">
    <tr>
      <th colspan="2">
        <hr />
        <h3 class="tableSectionHeader">Duration Information</h3>
        <hr />
      </th>
    </tr>
    <tr>
      <th class="library-card-header" id="years">Total Years</th>
      <td></td>
    </tr>
    <tr>
      <th class="library-card-header" id="semesters">Total Semesters</th>
      <td></td>
    </tr>
    <tr>
      <th class="library-card-header" id="months">Total Months</th>
      <td></td>
    </tr>
    <tr>
      <th class="library-card-header" id="weeks">Total Weeks</th>
      <td></td>
    </tr>
    <tr>
      <th class="library-card-header" id="days">Total Days</th>
      <td></td>
    </tr>
    <tr>
      <th class="library-card-header" id="hours">Total Hours</th>
      <td></td>
    </tr>
    <tr>
      <th class="library-card-header" id="minutes">Total Minutes</th>
      <td></td>
    </tr>
    <tr>
      <th class="library-card-header" id="daysPerWeek">Days Per Week</th>
      <td></td>
    </tr>
    <tr>
      <th class="library-card-header" id="hoursPerDay">Hours Per Day</th>
      <td></td>
    </tr>
    <tr>
      <th class="library-card-header" id="minutesPerDay">Minutes Per Day</th>
      <td></td>
    </tr>
  </tbody>

</table>

Upvotes: 0

Related Questions