如何在每个函数中迭代当前项?

时间:2016-03-15 18:11:39

标签: javascript jquery loops this each

我有一个嵌套的每个函数,并想知道在触发if语句时我如何引用this单项:

// check if array is empty
if(sameValArr.length === 0)
{
   $(this).hide(); // hide current video thumbnail item
}
else // not empty
{
   $(this).show(); // show current video tbumbnail item
}

也尝试过:
$(item).hide();
$(item[i]).hide();

目前,它正在隐藏所有类名为.video-thumbnail的视频,我只想隐藏当前正在迭代的视频,而不是全部。

完整功能:

// check every time the user checks/unchecks inputs to show/hide the video
function checkboxChanged(videoTags)
{
    var checkedAttr = []; // array for checked attributes
    // change event listener for whenever one or more of the following checkboxes have been checked/unchecked
    $('#category-list :checkbox').change(function() 
    {
        checkedAttr = []; // refresh and initialize new array values
        $('#category-list :checkbox').each(function(i, item) // loop thru the input checkboxes
        {
            if($(item).is(':checked')) // item is checked
            {
                checkedAttr.push($(item).val()); // add it to array
            }
        });
        console.log("checkedAttr: ", checkedAttr);
        console.log("init videoTags: ", videoTags);


        // loop through each of the thumbnails to see if video tags match those in checkedAttr array
        $('.video-thumbnail').each(function(i, item)
        {
            console.log(i + " videoTags: ", videoTags);

            // TODO:
            // 1. compare the two arrays if there's any matching values in both
            // 2. if yes, store the matching value in a new array; otherwise do nothing
            // 3. check the new array if it isn't empty 
            // 4. if empty, hide the video; if not empty do nothing (show video)
            var sameValArr = []; // refresh array values
            console.log("INTERSECT: ", arrayIntersection(checkedAttr, videoTags));     // print resulting array intersection
            sameValArr = arrayIntersection(checkedAttr, videoTags); // store same matching array intersection values

            // check if array is empty
            if(sameValArr.length === 0)
            {
                $(this).hide(); // hide current video thumbnail item
            }
            else // not empty
            {
                $(this).show(); // show current video thumbnail item
            }
            console.log("<br/>");
        });
    });
}

更新

我花了一些时间使用调试器,并意识到嵌套的视频缩略图类的每个函数将被迭代多达九次(存在的视频缩略图类的数量)以及检查每个输入是否有相同的以及自同一个ValArr几乎总是空的,它在每次迭代时一个接一个地隐藏视频。还在努力修复它......

1 个答案:

答案 0 :(得分:1)

使用传入的对象item

     $('.video-thumbnail').each(function(i, item)
        {
            console.log(i + " videoTags: ", videoTags);

            // TODO:
            // 1. compare the two arrays if there's any matching values in both
            // 2. if yes, store the matching value in a new array; otherwise do nothing
            // 3. check the new array if it isn't empty 
            // 4. if empty, hide the video; if not empty do nothing (show video)
            var sameValArr = []; // refresh array values
            console.log("INTERSECT: ", arrayIntersection(checkedAttr, videoTags));     // print resulting array intersection
            sameValArr = arrayIntersection(checkedAttr, videoTags); // store same matching array intersection values

            // check if array is empty
            if(sameValArr.length === 0)
            {
                $(item).hide(); // hide current video thumbnail item
            }
            else // not empty
            {
                $(item).show(); // show current video thumbnail item
            }
            console.log("<br/>");
        });