I wish to map through all the td's/cells in a table and check for their data attributes. If the attribute/his assigned value is not empty, I would like to console.log it.

I got this for now but it does not seem to work properly(It just says that all of the td's are not empty). Also, I am not sure why the this inside the map function points to the window object but not to the exact td. Any ideas what am I missing?

function checkTds() {
    var $tab = $('table td');
    $.map($tab, function(){
        console.log($(this));
        if ($tab.attr("custom-data-attribute") !== "") {
            console.log($(this));
        }
    });
}

checkTds();

I wish to map through all the td's/cells in a table and check for their data attributes. If the attribute/his assigned value is not empty, I would like to console.log it.

I got this for now but it does not seem to work properly(It just says that all of the td's are not empty). Also, I am not sure why the this inside the map function points to the window object but not to the exact td. Any ideas what am I missing?

function checkTds() {
    var $tab = $('table td');
    $.map($tab, function(){
        console.log($(this));
        if ($tab.attr("custom-data-attribute") !== "") {
            console.log($(this));
        }
    });
}

checkTds();

• javascript
• jquery
• custom-data-attribute

• 2 you should be using $tab.map(), not $.map($tab) – billyonecan Commented Oct 25, 2017 at 8:05
• 1 Both ways work. Since a nodelist can be iterated in jQuery you can also use $tab.map(). – Mouser Commented Oct 25, 2017 at 8:25
• you can, but they're not the same. .map() is specifically for working with jquery collections – billyonecan Commented Oct 25, 2017 at 8:47

1 Answer 1

You are using map which assigns its own variable to the iterated list:

From the documentation

callback Type: Function( Object elementOfArray, Integer indexInArray ) => Object The function to process each item against. The first argument to the function is the array item, the second argument is the index in array The function can return any value. A returned array will be flattened into the resulting array. Within the function, this refers to the global (window) object.

It is also standard to use the prefix data to make your custom attributes: data-«yourname».

function checkTds() {
  var $tab = $('table td');
  $.map($tab, function(element) {

    //look at the element var here
    //also check if the attribute exists!
    if ($(element).attr("custom-data-attribute") && $(element).attr("custom-data-attribute") !== "") {
      console.log($(element).attr("custom-data-attribute"));
    }
  });
}

checkTds();

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td custom-data-attribute="1"></td>
    <td></td>
    <td></td>
    <td custom-data-attribute="4"></td>
  </tr>
</table>

On a side note: I personally would advise against using variables with the prefix $ while using jQuery. It makes it more easy to confuse them with actual jQuery functions.