Anna J.Rittle Anna J.Rittle - 2 months ago 16
Javascript Question

How to debug why jquery.each does not work in my code?

See my code below. The

colorSelectType
in
.each
is not working, what should I do?



$(function() {
// param

tabSelectColums();

//func
function tabSelectColums() {

var colum = $('.tablecontact__body tr td:nth-child(3)');


function colorGetGradient() {
myPainColor = {
// defaultColor
black: '#2c3e50',
// selectColor
n2: '#7f8c8d',
n1: '#f1c40f',
n3: '#f39c12',
n4: '#e74c3c',
n5: '#2ecc71',
n6: '#3498db',
gray: '#7f8c8d',
yellow: '#f1c40f',
orange: '#f39c12',
red: '#e74c3c',
green: '#2ecc71',
blue: '#3498db'
};
}
colorGetGradient(); //


function colorSelectType( minNumber, maxNumber, colorNumber ) {
if ( $(this).text() <= minNumber && $(this).text() >= maxNumber ) {
$(this).css('color', colorNumber);
}
return $(this).css( 'fontWeight', myPainColor.black );
}



colum.each(function(index, el) {
colorSelectType(3, 1, myPainColor.red );
});



// for (var i = 0; i < colum.length; i++) {
// var q1 = 3;
// var q2 = 1;
// var q3 = myPainColor.n1;

// colorSelectType(q1, q2, q3 );
// }



// colorSelectType( 6, 4, myPainColor.red );
// colorSelectType( 9, 7, myPainColor.red );
// colorSelectType( 12, 10, myPainColor.red );
// colorSelectType( 15, 13, myPainColor.red );
// colorSelectType( 18, 15, myPainColor.red );
// colorSelectType( 21, 19, myPainColor.red );


}

});

.tablecontact__table {
font-family: Roboto, Helvetica, sans-serif;
color: #000;
font-size: 12px;
margin: 20px 0;
width: 100%;
}
.tablecontact__header {
font-size: 16px;
background: #cceffb;
text-transform: uppercase;
}
.tablecontact__body {
font-size: 14px;
background: #e2f5fc;
}
.tablecontact__th th {
padding: 6px 12px;
}
.tablecontact__td td {
padding: 3px 6px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<header>
<!-- <__ partial src="header.html"></partial> -->
</header>

<section id="myhero">

<table class="tablecontact__table">
<thead class="tablecontact__header">
<tr class="tablecontact__th">
<th>text-header</th>
<th>text-header</th>
<th>numbers</th>
<th>text-header</th>
<th>text-header</th>
</tr>
</thead>
<tbody class="tablecontact__body">
<tr class="tablecontact__td">
<td>text01</td>
<td>text02</td>
<td>1</td>
<td>text04</td>
<td>text05</td>
</tr>
<tr class="tablecontact__td">
<td>text01</td>
<td>text02</td>
<td>2</td>
<td>text04</td>
<td>text05</td>
</tr>
<tr class="tablecontact__td">
<td>text01</td>
<td>text02</td>
<td>10</td>
<td>text04</td>
<td>text05</td>
</tr>
<tr class="tablecontact__td">
<td>text01</td>
<td>text02</td>
<td>15</td>
<td>text04</td>
<td>text05</td>
</tr>
<tr class="tablecontact__td">
<td>text01</td>
<td>text02</td>
<td>20</td>
<td>text04</td>
<td>text05</td>
</tr>
</tbody>
</table>
</section>

<section>
<div class="space500"></div><div class="space500"></div><div class="space500"></div>
</section>

<footer>
<!-- <__ partial src="footer.html"></partial> -->
</footer>


</body>




Answer Source

The Problem

The colorSelectType function's code was probably inside the column.each loop, I got to this conclusion because you're referencing $(this) inside of it.

As soon as you wrapped the code with that function, this keyword started to point to the main global Javascript object (i.e window), then you were trying to create a jQuery list with the window object, which in turn returns an empty jQuery list:

The Solution

Inside column.each loop, we already have references to each $td element, we just needed to pass this reference as argument inside colorSelectType function, we're doing that in following solution:

// vars
var column = $('.tablecontact__body tr').find('td:nth-child(3)'),
    myPainColor = {
        red: '#FF0000',
        black: '#000000'
    };

// functions
function colorSelectType($elem, minNumber, maxNumber, colorNumber) {
    /**
     * here, $elem is the reference to the jQuery's object of
     * the current td
     **/
    
    if ($elem.text() >= minNumber && $elem.text() <= maxNumber) {
        $elem.css('color', colorNumber);
    }
}

// init
column.each(function (index, el) {
    /** 
     * we're passing a jQuery's object reference of 
     * the current td as an argument inside 'colorSelectType'
     * function
     **/
     
    colorSelectType($(el), 1, 3, myPainColor.red);
})
<!-- Scripts -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- HTML -->
<table class="tablecontact__body" border="1">
    <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
    </tr>
    <tr>
        <td>2</td>
        <td>2</td>
        <td>2</td>
        <td>2</td>
    </tr>
    <tr>
        <td>3</td>
        <td>3</td>
        <td>3</td>
        <td>3</td>
    </tr>
    <tr>
        <td>4</td>
        <td>4</td>
        <td>4</td>
        <td>4</td>
    </tr>
    <tr>
        <td>5</td>
        <td>5</td>
        <td>5</td>
        <td>5</td>
    </tr>
</table>