Detect if a jQuery object is on the page or not

前端 未结 4 1576
温柔的废话
温柔的废话 2021-01-07 18:11

Given a jQuery object, $j, I need to know if it represents something that is already on the page or if it is something that has not yet been put on the page. Fo

相关标签:
4条回答
  • 2021-01-07 18:27

    The jQuery object represents a collection of html elements.

    After your selection: $j = $('#id-of-something-already-on-the-page');

    All you have to do is check $j.length. If it's one, there is one item on the page.

    0 讨论(0)
  • 2021-01-07 18:41

    With jQuery (at least with version 1.7.1) $('html').parent() returns a non-empty array ([#document]):

    $j = $("<p>I'll cook you some eggs, Margie.</p>");
    $j.parent().length === 0
    $('html').parent().length === 1
    $('body').parent().length === 1
    

    So 'mu is too short''s note is not an issue:

    I can see the first one failing if $j is the html or possibly body; I'm happy to ignore those two pathological cases. I can't think of any way that the second approach would fail.

    0 讨论(0)
  • 2021-01-07 18:45

    Personally, I'd start by descending from an element you know is in the page, like <html> or <body>, and use .has():

    if ($('html').has($j).length)
    {
        // $j is in the page
    }
    

    This works even for the two pathological cases you mentioned. It's more idiomatic to check .length rather than .size(). There's also no reason to check that the value returned is > 0. The length property will always be a nonnegative integer, so it's sufficient to check the truthiness of the value.

    0 讨论(0)
  • 2021-01-07 18:47

    I'd probably just check to see if the element can reach the body element:

    $j.closest('body').size()>0
    

    As you noted in other comments, this would fail in some exceptional cases where you are handling extra body elements. If you really want to detect those situations, I guess you could check to see if you have multiple $(body) elements but I suspect that such extreme cases will get out of control pretty quickly.

    This "is-probably-attached-to-page" check could be turned in to a bona-fide jQuery selector, too:

    $.expr[':'].isProbablyAttached = function(obj){
    
        return $(obj).closest('body').size()>0;
    };
    
    // Usage:
    $('.someClasses:isProbablyAttached').doSomething();
    
    0 讨论(0)
提交回复
热议问题