javascript - 通过 JavaScript 过滤 DOM 元素

Question

我有这样创建的元素:

function appendCalendarEventToList(className, event) {

        var eventObject = {
            title: event.title,
            id: event.id,
            type: event.type,
            color: event.color,
            description: event.description,
            canReoccur: event.canReoccur,
            reoccurVal: event.reoccurVal,
            estHours: event.estHours,
            project: event.project
        };

        var div = document.createElement("div");
        div.className = 'external-event';
        div.style.background = event.color;
        div.innerHTML = event.title;

        // store the Event Object in the DOM element so we can get to it later
        $(div).data('eventObject', eventObject);

        $(div).draggable({
            helper: function () {
                $copy = $(this).clone();
                $copy.data('eventObject', eventObject);
                $copy.css({ "list-style": "none", "width": $(this).outerWidth() }); return $copy;
            },
            appendTo: 'body',
            zIndex: 999,
            revert: true,      // will cause the event to go back to its
            revertDuration: 0  //  original position after the drag
        });

        $(className).append(div);

       $(div).qtip({
            content: event.title,

            position:
                {
                    target: 'mouse'
                },
            //  show: { event: 'click' },
            hide: { event: 'mousedown mouseleave' },
            style: {
                classes: 'custSideTip',
                width: 200,
                padding: 5,
                color: 'black',
                textAlign: 'left',
                border: {
                    width: 1,
                    radius: 3
                }
            }
        });


        return div;
    }

如您所见，每个事件都有一个项目属性。

但是，也有一些项目和任务(以及可以忽略的案例):

function refetchUnscheduled() {
    $.ajax({
        type: "POST",
        url: "CalendarServices.aspx/GetUnscheduled",
        data: '',
        async:false,
        success: function (data) {
            var projects = '.project-container';
            var tasks = '.task-container';
            var cases = '.case-container';
            $(projects).html('');
            $(tasks).html('');
            $(cases).html('');

            var numProjects = 0;
            var numTasks = 0;
            var numCases = 0;

            $.each(data, function () {
                var className = '';
                var url = '';
                var typeName = '';
                var crm = this.crm;
                switch(this.type)
                {
                    case 'p':
                        className = projects;
                        url = 'ProjectViewFrame.aspx?id=' + this.id;
                        typeName = 'Project';
                        numProjects++;
                        break;
                    case 't':
                        className = tasks;
                        url = 'TaskViewFrame.aspx?id=' + this.id;
                        typeName = 'Task';
                        numTasks++;
                        break;
                    case 'c':
                        className = cases;
                        url = 'CaseViewFrame.aspx?id=' + this.id;
                        typeName = 'Case';
                        numCases++;
                        break;
                    default:
                }



                var curDiv = appendCalendarEventToList(className, this);
                var curEvent = this;

                $(curDiv).bind('contextmenu', function (e) {
                    $('#contextMenuContainer').html('');
                    var btn1 = createLink('Edit ' + typeName, 'context-elem-name');
                    $('#contextMenuContainer').append(btn1);
                    $(btn1).on('click', function () {
                        if (crm == '')
                            showCalendarModal('Edit ' + typeName, url);
                        else
                            showCRM(crm);

                    })


                    prepContextMenu(e);

                    return false;
                });
            });

            changeUnscheduledHeaders();
        }
       ,
        error: function () {

        }
    });

}

这是我需要的，但我不确定该怎么做:

我需要一个基于 OR 的过滤器: 鉴于以下情况:

function filter(criteria,projects-div,tasks-div)
{

   var words = criteria.split(' ');
}

我需要首先隐藏所有项目 obj.data('eventObject').title 包含一个或多个单词。

然后，一旦这些被过滤: 我需要首先显示项目可见的所有任务，

所以: obj.data('eventObject').project == 可见项目的项目属性之一。

然后，我还需要显示包含任何单词的任何任务。

所有比较也必须不区分大小写。

所以说我的标准是“hello world”

I show all projects with hello or world  in the title.
I show all tasks whos project attribute is visible after the first step
I show all tasks whos title has hello or world

谢谢

Answer 1

我使用的是移动设备，但乍一看，[].filter.call (NodeList, filterFn) 怎么样？ ？