如果存在多个元素，如何使用 jQuery 选择器指向正确的元素

Question

我在使用 jQuery 选择器在 html 中选择元素时遇到困难。我正在创建一个带有复选框和视频标签的分类过滤器。我正在尝试弄清楚如何为每个视频缩略图元素设置唯一标识符，这些元素根据其视频标签以及复选框是否选中来显示/隐藏。我有一个函数，基本上从另一个函数获取视频标签，该函数循环遍历每个视频并拉取其标签数组值，如下所示：

// print the results
        function(data)
        {
            var output;
            $.each(data.items, 
                function(i, item) 
                {
                    var vidTitle = item.snippet.title; // video title
                    var vidDesc = item.snippet.description; // video description
                    var videoId = item.snippet.resourceId.videoId; // video id
                    var vidThumbUrl = item.snippet.thumbnails.default.url; // video thumbnail url
                    getVideoDuration(videoId).done(function(duration, view/*, tags*/)
                    {
                        vidDuration = duration;
                        viewCount = view;
                        //vidTags = tags;

                        // check if video tags is empty or undefined 
                        if(typeof videoTags === 'undefined' || videoTags == "" || videoTags === null)
                        {
                            videoTags = "No tags have been defined for this video.";
                        }

                        // check input categories
                        validateCategory(videoTags);

                        console.log("id: " + videoId + " duration: " + convert_time(vidDuration) + " viewCount: " + viewCount + ' videoTags: ' + videoTags); // return value in console
                        //console.log(JSON.stringify(item));
                        console.log("<br>");

                        output = '<li><iframe height="' + vidHeight + '" width="' + vidWidth + '" src="//www.youtube.com/embed/' + videoId + '"></iframe></li><div id="title">' + vidTitle + '</div><div id="desc">' + vidDesc + '</div><div id="duration">Length: ' + convert_time(vidDuration) + '</div><div id="stats">View Count: ' + viewCount + '</div><div id="tags">Tags: ' + videoTags + '</div>';
                        // if video title is longer than 25 characters, insert the three-dotted ellipse
                        if(vidTitle.length > 25)
                        {
                            var strNewVidTitle = vidTitle.substr(0, 25) + "...";
                            vidTitle = strNewVidTitle;
                        }
                        var vidThumbnail = '<div class="video-thumbnail"><a target="_blank" href="https://www.youtube.com/watch?v=' + videoId + '"><div class="video-overlay"><img src="imgs/video-play-button.png"/></div><img id="thumb" src="' + vidThumbUrl + '" alt="No Image Available." style="width:204px;height:128px"/></a><p><a target="_blank" href="https://www.youtube.com/watch?v=' + videoId + '">' + vidTitle + '</a><br/>' + convert_time(vidDuration) + ' / Views: ' + viewCount + '</p></div>';

                        // append results
                        $('#results').append(output);
                        $('#thumb').append(vidThumbnail);

                    }); // end of getVideoDuration(videoId).done
                }
            ); // end of getViewCount(videoId).done
        }         

现在，当复选框设置为选中时，它将检查input属性value="reading"，如果它与标签匹配，则将.video-thumbnail类div 属性设置为rel="reading"以唯一标识和分类每个视频。这是我到目前为止尝试的：

// show/hide categorized videos
function validateCategory(videoTags) // TODO: add videoId to make an unique identifier for said video thumbnail.
{
    // check if input category is or isn't checked and omit videos not matching checked categories
    if($('input[value="reading"]').is(':checked'))
    {
        console.log('%c reading: ' + ".is(':checked'):", 'color:blue;'); // check if 'pregnancy' is checked
        for(i = 0; i < videoTags.length; i++)
        {
            if(videoTags[i] === "reading".trim().toLowerCase())
            {
                $('.video-thumbnail', this).css({visibility:'visible'});
                $('.video-thumbnail', this).show();
                $('.video-thumbnail', this).attr('rel','reading'); // set rel attribute according to tag name as a unique identifier
                $('.video-thumbnail', this).css({backgroundColor:'red'});
            }
            else
            {
                $('.video-thumbnail', this).css({visibility:'hidden'});
                $('.video-thumbnail', this).hide();
            }
        }
    }
    else
    {
        $('.video-thumbnail', this).css({visibility:'hidden'});
        $('.video-thumbnail', this).hide();
    }
}

.HTML：

<div id="container">
    <h1>Youtube Videos</h1>
    <ul id="results"></ul>
    <hr/>
    <h1>Thumbnails</h1>
    <div id="thumb"></div>
    <div id="category-list" class="getFixed">
        <h1>Categories</h1>
        <input class="categories" type="checkbox" name="filter" value="Reading" checked>Reading<br/>
        <input class="categories" type="checkbox" name="filter" value="Math" checked>Math<br/>
        <input class="categories" type="checkbox" name="filter" value="Science" checked>Science
    </div>
</div>

validateCategory(...)函数将成功循环，但它不会引用 jQuery 选择器来使用this视频缩略图类在选中/取消选中时从类别中显示/隐藏某些视频，例如类别过滤器。我什至做了背景颜色和可见性，但没有任何效果。我试图弄清楚如何将两者和两者联系在一起。

Answer 1

看起来this指的是validateCategory()函数中的window对象。窗口对象不能直接访问 dom，因此您需要使用 this.document 或仅使用 document 。但是，我认为在这种情况下，您不想引用整个文档。这样做将在每次迭代时对 .video-thumbnail 类的每个成员进行更改。我认为您想在为每个条目构建vidThumbnail div后调用此函数，并将此div 作为参数传递：

    function(data)
    {
        var output;
        $.each(data.items, 
            function(i, item) 
            {
                var vidTitle = item.snippet.title; // video title
                var vidDesc = item.snippet.description; // video description
                var videoId = item.snippet.resourceId.videoId; // video id
                var vidThumbUrl = item.snippet.thumbnails.default.url; // video thumbnail url
                getVideoDuration(videoId).done(function(duration, view/*, tags*/)
                {
                    vidDuration = duration;
                    viewCount = view;
                    //vidTags = tags;

                    // check if video tags is empty or undefined 
                    if(typeof videoTags === 'undefined' || videoTags == "" || videoTags === null)
                    {
                        videoTags = "No tags have been defined for this video.";
                    }
                    console.log("id: " + videoId + " duration: " + convert_time(vidDuration) + " viewCount: " + viewCount + ' videoTags: ' + videoTags); // return value in console
                    //console.log(JSON.stringify(item));
                    console.log("<br>");

                    output = '<li><iframe height="' + vidHeight + '" width="' + vidWidth + '" src="//www.youtube.com/embed/' + videoId + '"></iframe></li><div id="title">' + vidTitle + '</div><div id="desc">' + vidDesc + '</div><div id="duration">Length: ' + convert_time(vidDuration) + '</div><div id="stats">View Count: ' + viewCount + '</div><div id="tags">Tags: ' + videoTags + '</div>';
                    // if video title is longer than 25 characters, insert the three-dotted ellipse
                    if(vidTitle.length > 25)
                    {
                        var strNewVidTitle = vidTitle.substr(0, 25) + "...";
                        vidTitle = strNewVidTitle;
                    }
                    var vidThumbnail = '<div class="video-thumbnail"><a target="_blank" href="https://www.youtube.com/watch?v=' + videoId + '"><div class="video-overlay"><img src="imgs/video-play-button.png"/></div><img id="thumb" src="' + vidThumbUrl + '" alt="No Image Available." style="width:204px;height:128px"/></a><p><a target="_blank" href="https://www.youtube.com/watch?v=' + videoId + '">' + vidTitle + '</a><br/>' + convert_time(vidDuration) + ' / Views: ' + viewCount + '</p></div>';
                    // check input categories
                    validateCategory(videoTags, vidThumbnail);
                    // append results
                    $('#results').append(output);
                    $('#thumb').append(vidThumbnail);

                }); // end of getVideoDuration(videoId).done
            }
        ); // end of getViewCount(videoId).done
    }

function validateCategory(videoTags, vidThumbnail) // TODO: add videoId to make an unique identifier for said video thumbnail.
{
    // check if input category is or isn't checked and omit videos not matching checked categories
    if($('input[value="reading"]').is(':checked'))
    {
        console.log('%c reading: ' + ".is(':checked'):", 'color:blue;'); // check if 'pregnancy' is checked
        for(i = 0; i < videoTags.length; i++)
        {
            if(videoTags[i] === "reading".trim().toLowerCase())
            {
                $('.video-thumbnail', vidThumbnail).css({visibility:'visible'});
                $('.video-thumbnail', vidThumbnail).show();
                $('.video-thumbnail', vidThumbnail).attr('rel','reading'); // set rel attribute according to tag name as a unique identifier
                $('.video-thumbnail', vidThumbnail).css({backgroundColor:'red'});
            }
            else
            {
                $('.video-thumbnail', vidThumbnail).css({visibility:'hidden'});
                $('.video-thumbnail', vidThumbnail).hide();
            }
        }
    }
    else
    {
        $('.video-thumbnail', vidThumbnail).css({visibility:'hidden'});
        $('.video-thumbnail', vidThumbnail).hide();
    }
}