Question

Here is my function:

function DisplayGridElementsBasedOnCriteria(dataItem, propertyToEvaluate, shouldEqualvalue, selectorsToChange, hideSelectedElements, nameOfColumnContainingElements) {
if (propertyToEvaluate == shouldEqualvalue) {
    var $row = $(dataItem.row);
    if (nameOfColumnContainingElements == undefined) {
        if (hideSelectedElements) {
            $row.children("td").children(selectorsToChange).hide();

        }else {
            $row.children("td").children(selectorsToChange).show();
        }
    } else {
        $.each($row.children("td"), function (index, column) {
            var $column = $(column);
            var $headerText = $column.closest('table').find('th').eq($column.index()).children(".t-link").text();
            if ($headerText == nameOfColumnContainingElements) {  
                if (hideSelectedElements) {
                    $column.children(selectorsToChange).hide();
                } else {
                    $column.children(selectorsToChange).show();
                }
            }

        });
    }

}

}

Which is being used in such a way:

 <script type="text/javascript">
    function onRowDataBound(e) {
        DisplayGridElementsBasedOnCriteria(e, e.dataItem.Status, "Submitted", "a.t-grid-delete, a.t-grid-Edit", true, "Actions");
    }
</script>

I am not very good at jQuery/javascript and it works the way I want but it seems a bit complex and bloated.

Can anyone give provide a more cleaned up version?

Per the answer here is the cleaner version:

function DisplayGridElementsBasedOnCriteria(dataItem, propertyToEvaluate, shouldEqualvalue, selectorsToChange, hideSelectedElements, nameOfColumnContainingElements) {
if (propertyToEvaluate === shouldEqualvalue) {
    var $row = $(dataItem.row);

    if (nameOfColumnContainingElements === undefined) {
            $row.children("td").children(selectorsToChange).toggle(!hideSelectedElements);
    } 
    else {
        $row.children("td").each(function (index, column) {
            var $column = $(column),
                $headerText = $column.closest('table').find('th').eq($column.index()).children(".t-link").text();

            if ($headerText === nameOfColumnContainingElements) {  
                    $column.children(selectorsToChange).toggle(!hideSelectedElements);
            }

        });
    }  
}

}

Answer 1

As for cleaning up:

• You can use .toggle(bool) instead of .show/.hide with if/else clauses.
• You can chain vars like var a = 1, b = 2.
• You might want to use === to avoid JavaScript’s quirks.
• You can use $(...).each instead of $.each($(...).