Question

I have a HTML table where each row has two columns. First column is a capital letter and the second one is a brand name, like so:

A | Amazon

A | Apple

B | BMW

C | Chanel

etc. But whenever there are two brand names that has the same first capital letter I would like the table to look like this:

A | Amazon

    | Apple

B | BMW

C | Chanel

In other words, if there are more than one instance of each capital letter I would like to display only the first one. If I applied a class to the first column, is there a way I could achieve this using jQuery?

Answer 1

You can do that with the each() function (assuming the class of your first column is leftCol):

$(document).ready(function() {
    var lastLetter = "";
    $(".leftCol").each(function() {
        var $this = $(this);
        var text = $this.text();
        if (text != lastLetter) {
            lastLetter = text;
        } else {
            $this.text("");
        }
    });
});