Получение ошибки: «Не удается прочитать свойство 'toLowerCase' из неопределенного» с помощью Jquery find () внутри функции filter ()

Question

У меня есть функция фильтра для таблицы.Таблица имеет четыре столбца, которые можно фильтровать: Клиент, Работа, Срок, Метки.

Это работало нормально, когда я отфильтровал текст TD, которые имеют определенный класс.Но теперь я изменил столбец Due так, чтобы в некоторых строках теперь был ввод вместо простого текста.

Поэтому мне нужно отфильтровать текст некоторых строк и значение ввода в других строках.

Я попытался добавить следующую строку:

+ $(this).find(".filterDue").children().val().toLowerCase().indexOf(due) > -1 && +

Но эта строка вызывает ошибку: Uncaught TypeError: Невозможно прочитать свойство 'toLowerCase' из неопределенного

Вот код I 'm используя:

<td 
    class="filterDue" 
    id="dueDateTd{{ $key }}"
    style="{{ (strtotime($job['date']->format('m/d/Y')) < strtotime('now') ? 'color:red' : '') }}"

>
    <!--If the job has no Rrules it is a one time job so show the date as an input-->
    @if($job['one_time_job'])
        <input 
            type="text" 
            class="form-control input-sm datepicker filterDueInput" 
            style="max-width:90px; display:inline; {{ (strtotime($job['date']->format('m/d/Y')) < strtotime('now') ? 'color:red' : '') }}"
            name="one_time_job_due_date" 
            id="one_time_job_due_date{{ $key }}" 
            value="{{ $job['date']->format('m/d/Y') }}"
            onchange="update_one_time_job_due_date({{ $key . ',' . $job['recur_client_jobs_id'] }})"
        >
    @else
        {{ $job['date']->format("m/d/Y") }}
    @endif
</td>

$("#box_dashboard_client,#box_dashboard_job,#box_dashboard_due, #box_dashboard_label").on("keyup", function() {
    client = $("#box_dashboard_client").val().toLowerCase();
    job = $("#box_dashboard_job").val().toLowerCase();
    due = $("#box_dashboard_due").val().toLowerCase();
    label = $("#box_dashboard_label").val().toLowerCase();

    $(".filter").filter(function() {
        $(this).toggle($(this).find(".filterClients").text().toLowerCase().indexOf(client) > -1 && +
        + $(this).find(".filterJobs").text().toLowerCase().indexOf(job) > -1 && +
        + $(this).find(".filterLabels").text().toLowerCase().indexOf(label) > -1 && +
        + $(this).find(".filterDue").children().first().val().toLowerCase().indexOf(due) > -1 && +
        + $(this).find(".filterDue").text().toLowerCase().indexOf(due) > -1)    
    });
});

Я не понимаю, почему этот селектор не определен.Я могу предупредить этот селектор, и он показывает правильный вывод.Но это не работает как часть моей функции фильтрации.

Редактирование начинается здесь: Хорошо, это исправило сообщение об ошибке.Но у меня также есть другая проблема.Функция фильтра не работает, когда я включаю обе строки:

+ ($(this).find(".filterDue").children().first().val() || '') .toLowerCase().indexOf(due) > -1 && +
+ $(this).find(".filterDue").text().toLowerCase().indexOf(due) > -1)

Я могу закомментировать первую строку, и фильтрация работает со строками, в которых нет входных данных.Или я могу закомментировать вторую строку, и фильтрация работает только по строкам, в которых есть входные данные.Но я не могу использовать обе строки одновременно.

Answer 1

Проблема в @else случае.Если логика движется таким образом, children().first() из .filterDue будет textNode без значения, следовательно, undefined.

Это можно исправить, объединив ложное значение undefined в пустую строку:

+ ($(this).find(".filterDue").children().first().val() || $(this).find(".filterDue").children().text()).toLowerCase().indexOf(due) > -1