Change font size based on number of occurences in text

This is my lame first attempt. I would like to get a count of every unique word in a table. Based on that count, I would like to change the size of the text. I've tried to do this by adding a different class to every column on a table (so the first cell in the column of a table has a 'first' class, and the second cell in a table has a 'second' class in every column. I'm trying to do this programatically so I don't have to brute force a regex for every word that might populate the table. Any steerage in the right direction will be great :)

JS

$(function()
{
    var searchTerms = $('.thetable').text(); //get all search terms in table
    var words[] = text.split(''); //make them into an array
    for(var count =0, count < words.length; count++)
    {
    $('#results').append(words[i]);
    }
    if($('.first').length > 1).css({'font-size': 13 + 'px'}))
    else if($'.second').length > 1 && < 3).css({'font-size': 16 + 'px'}))
    else($('.third').length > 3).css({'font-size':18 + 'px'))
    }
});

HTML

<body>
<div id="results"></div>

<table style="width: 35%" cellspacing="1" class="thetable">
                <tr >
                                <td class="first">one</td>
                                <td class="second">three</td>
                                <td class="third">five </td>
                                <td class="fourth">six</td>
                                <td class="fifth">ten</td>
                </tr>
                <tr>
                                <td class="first">one</td>
                                <td class="second">three</td>
                                <td class="third">five</td>
                                <td class="fourth">seven</td>
                                <td class="fifth">ten</td>
                </tr>
                <tr>
                                <td class="first">one</td>
                                <td class="second">four</td>
                                <td class="third">five</td>
                                <td class="fourth">eight</td>
                                <td class="fifth">ten</td>
                </tr>
                <tr>
                                <td class="first">two</td>
                                <td class="second">four</td>
                                <td class="third">five</td>
                                <td class="fourth">nine</td>
                                <td class="fifth">ten</td>
                </tr>
</table>
</body>

Answers


var tds = $('table td');
var words = [];

tds.each(function() {
    var word = $(this).html();
    var num = $('td:contains(' + word.toLowerCase().trim() + ')', 'table').length;

    if (num <=1) {
        $(this).css('font-size', '13px');
    } else if(num > 1 && num < 3) {
        $(this).css('font-size', '23px');
    } else if (num > 3) {
        $(this).css('font-size', '60px');
    }
});

demo: http://jsfiddle.net/XRpzp/1/


Why not just use something like $('table.thetable tr').find('td:first') to get the first cells, for example? You don't have to go through the grunt work of tagging the classes explicitly. Or to be more explicit, find('td:eq(2)') and so on.


You'll need to reduce the array to a list of words and you'll probably want a count of each:

var words[] = text.split(''); //make them into an array
var o={}
for(var count =0, count < words.length; count++)
{
if(words[i] in o)o[words[i]]++; else o[words[i]]=1;
}

do you want to sort the list of words by count (most to least)?

var i, wordsByCount = [];
for(i in o)wordsByCount.push([o[i],i]);
worsByCount = wordsByCount.sort(sortFunc);

function sortFunc(a,b){return b[0]-a[0];}

for(var count =0, count < wordsByCount.length; count++)
{
$('#results').append(wordsByCount[i][1]);
}

or if you want to show the words and the number of occurances

for(var count =0, count < words.length; count++)
{
$('#results').append(wordsByCount[i][1] + " (" + wordsByCount[i][0] + ")");
}

Need Your Help

Gulp: Exclude src root folder when outputting to dest folder

javascript configuration config gulp

Given the following gulpfile, I would expect the contents of the dist folder to be the contents of src/js/. Instead, the contents of dist is src/js/*.

Swift hierarchy cannot load the menu

ios swift uinavigationcontroller uitabbarcontroller

I am new to Swift, and am facing an issue with the following hierarchy:

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.