Question

How do I ‘select’ the dom elements that pass the if statement in jQuery?

I am checking if the url has a hash. The hash matches the video container’s class. If the url does have a hash, the iframe with the matching class gets an active class added to display it as block, instead of hidden. If it doesn’t, the first video in the list is displayed:

jQuery(document).ready(function($) {

    videoCarousel();

}); 

function videoCarousel() {

    // Set variables
    var carousel = $('#video_container');
    var videos = $('#video_container #video iframe');

    // Get url hash and remove # from begining
    var hash = window.location.hash.substring(1);


    if (videos.hasClass(hash)) {
        $(this).addClass('active');
    } else {
        videos.first().addClass('active');
    }

}

Answer 1

If the url does have a hash, the iframe with the matching class gets an active class added to display it as block, instead of hidden. If it doesn’t, the first video in the list is displayed:

(My emphasis)

That’s the key info, and I think a lot of us read past it. You need to change your selector, and you don’t want this at all:

function videoCarousel() {
    // Set variables
    var carousel = $('#video_container');
    var videos = $('#video_container #video iframe');

    // Get url hash and remove # from begining
    var hash = window.location.hash.substring(1);

    // Get the video with the matching class
    var targetVideo;
    if (hash) {
        targetVideo = videos.filter("." + hash);
    }
    if (!targetVideo || !targetVideo[0]) {
        // There's no hash, or no match; use the first
        targetVideo = videos.first();
    }

    // Add the class
    targetVideo.addClass("active");
}