Syntax to select element by exact match of it's content

Question

I'm having syntax issues when selecting elements by exact match of its content.

$(document).ready(function () {
    $("#scorecardId").change(function () {
        var value = $(this).val().toLowerCase();
        $("#myTable tr").filter(function () {
            //filters by the 8th column scorecard
            $(this).toggle($(this).children(":eq(8)").text().toLowerCase().indexOf(value) > -1)
        });
    });
});

HTML

<table class="table table-condensed table-hover table-responsive table-striped">
<tr>
    <th>Edit</th>
    <th>
        <a href="@Html.GetUrlAndRouteObject(Model.Sort, "change_date")">
            Change Date
            @Html.AddSortArrow(Model.Sort, "change_date")
        </a>
    </th>
    <th>
        Effective Date
    </th>
    <th>
        @Html.DropDownListFor(model => model.type, new SelectList(Model.type), "-Type-", new { @id = "typeId" })
    </th>
    <th>
        Description
    </th>
    <th>
        Empid
    </th>
    <th>
        SSO
    </th>
    <th>
        Agent_Name
    </th>
    <th>
        @Html.DropDownListFor(model => model.type, new SelectList(Model.scorecard), "-Scorecard-", new { @id = "scorecardId" })
    </th>
    <th>
        Load_Date
    </th>
</tr>

@foreach (var item in Model.get_staff_changelog_results)
{
    <tbody id="myTable">
        <tr>
            <td>
                @using (Html.BeginForm("Index", "StaffChange", FormMethod.Post, new { @id = "myform" }))
                {
                    @Html.Hidden("sso", item.SSO)
                    @Html.Hidden("name", item.Agent_Name)
                    <a href="javascript: submitForm();" class="fa fa-pencil fa-lg"></a>
                }
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Change_Date)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Effective_Date)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Type)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Description)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Empid)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.SSO)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Agent_Name)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Scorecard)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Load_Date)
            </td>
        </tr>
    </tbody>
}

The function above is finding any string that contains my input string. If I'm searching for CAM, the result output may include CAM, CAM TOS, CAM FOO, etc. When in reality, I only want CAM in my results. I understand my syntax isn't looking for this but this is where i'm having issues.

I found a post here that explains what I'm looking for, but I can't get the correct syntax to work. I've tried the below, but doesn't seem to work:

$(this).toggle($(this).children(":eq(" + "8" + ")").text().toLowerCase() === value > -1)

What is the correct syntax to find an exact match?

Answer 1

After taking the <tbody> tag out of the for loop. Try this, though not much different from what you have tried. Also console.log the two texts you are comparing to see if they are producing the expected texts.

$(this).toggle(($(this).children(":eq(8)").text().toLowerCase()) === value);