使用 .filter() 使用 jQuery 选择包含带有特定文本的 tr 的表行

Question

我正在尝试使用jQuery .filter() 函数选择包含one td 和特定文本的表中的行。我的函数是这样的......

function getBudgetRowByType(serviceTypeNum) {
        alert(serviceTypeNum);
        if (parseInt(serviceTypeNum) == 1) {
            var row = $('.bgTablePopUp > tbody > tr').filter(function () {
                $(this).children("td:contains('Instruction')");
            });
            return row;
        } else if (parseInt(serviceTypeNum) == 2) {
            var row = $('.bgTablePopUp > tbody > tr').filter(function () {
                $(this).children("td:contains('Research')");
            });
            return row;
        } else if (parseInt(serviceTypeNum) == 3) {
            var row = $('.bgTablePopUp > tbody > tr').filter(function () {
                $(this).children("td:contains('Administration')");
            });
            return row;
        } else {
            // Else nada
            return null;
        }
    }

html 看起来像这样......

<table>
<tr>
<td>Instruction</td>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
<tr>
<td>Research</td>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
<tr>
<td>Administration</td>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
</table>

我不断收到未定义的结果，我不知道为什么...

Answer 1

像这样使用.filter - （其他条件相同）

if (parseInt(serviceTypeNum) == 1) {
            var row = $('.bgTablePopUp > tbody > tr > td').filter(function () {
                    return $.trim($(this).text()) === "Instruction";
            }).closest('tr');
            return row;
        }

Answer 2

这是一种 POJS 方法（IE9+），否则需要 Array.prototype.filter 支持（有垫片），document.querySelectorsAll（但您可以使用其他 DOM 方法来获取 tr 元素，或者再次它们是可用的垫片，您可以使用 jquery 来选择它们）和Node.textContent（垫片再次可用，或者只是遍历 DOM 并收集文本节点）。我认为看到替代方案很好，您已经为您的jQuery.filter 问题选择了答案。您可能还会发现使用 switch 语句更适合您正在做的事情。

Javascript

function contains(elements, string) {
    return Array.prototype.filter.call(elements, function (tr) {
        return tr.textContent.indexOf(string) !== -1;
    });
}

function getBudgetRowByType(serviceTypeNum) {
    var row = null,
        selector = "table tr";

    switch (parseInt(serviceTypeNum)) {
        case 1:
            row = contains(document.querySelectorAll(selector), "Instruction");
            break;
        case 2:
            row = contains(document.querySelectorAll(selector), "Research");
            break;
        case 3:
            row = contains(document.querySelectorAll(selector), "Administration");
            break;
        default:
    }

    return row;
}

console.log(getBudgetRowByType("1"));
console.log(getBudgetRowByType("2"));
console.log(getBudgetRowByType("3"));
console.log(getBudgetRowByType("4"));

开启jsfiddle