7

absolute親divである位置を持つdiv(parentDivStyle)があります。次に、親 div 内に position を持つ 5 つの children(childDivStyle) div がありrelativeます。overflow親divの非表示に設定しました。そのため、子 div の一部が表示されません。jquery では表示されない div を取得したいと考えています。何か方法はありますか？

私はそれをグーグルで検索しましたが、ほとんどの結果は「目に見える」プロパティに関連しています。それは私が望んでいるものではありません。また、私はどのプラグインも好みません。助けてください。

CSS

.parentDivStyle {
    overflow:hidden;
    width:300px;
    height:50px;
    position:absolute;
    background:#ccc;
    float:left;
}
.childDivStyle {
    width:100px;
    height:50px;
    position:relative;
    float:left;
    background:red;
    border: 1px solid black;
}

HTML

<div class="parentDivStyle">
<div class="childDivStyle">1</div>
<div class="childDivStyle">2</div>
<div class="childDivStyle">3</div>
<div class="childDivStyle">4</div>
<div class="childDivStyle">5</div>
</div>

JSFIDDLE

4

6 に答える 6

1

解決策としてはいかがでしょうか

CSS

.parentDivStyle {
    overflow:hidden;
    width:300px;
    height:50px;
    position:absolute;
    background:#ccc;
    float:left;
}
.childDivStyle {
    width:100px;
    height:50px;
    position:relative;
    float:left;
    background:red;
    border: 1px solid black;
}

HTML

<div id="parent" class="parentDivStyle">
    <div class="childDivStyle">1</div>
    <div class="childDivStyle">2</div>
    <div class="childDivStyle">3</div>
    <div class="childDivStyle">4</div>
    <div class="childDivStyle">5</div>
</div>

Javascript

function getNotVisible(parentId, childClassName) {
    var parent = document.getElementById(parentId),
        children,
        elements;

    if (parent) {
        children = parent.getElementsByClassName(childClassName);
        if (children) {
            elements = [];
            Array.prototype.forEach.call(children, function (child) {
                var pBounds = parent.getBoundingClientRect(),
                    cBounds = child.getBoundingClientRect();

                if (cBounds.right < pBounds.left || cBounds.left > pBounds.right || cBounds.bottom < pBounds.top || cBounds.top > pBounds.bottom) {
                    elements.push(child);
                }
            });
        }
    }

    return elements;
}

console.log(getNotVisible("parent", "childDivStyle"));

jsfiddleについて

ところで、これからjqueryオブジェクトが必要な場合は、次のようにします

var $hiddens = $(getNotVisible("parent", "childDivStyle"));

また、未定義ではなく配列を返したい場合、つまり、親要素がない場合、または子要素が見つからない場合は、黙って失敗します。

その後削除

elements = [];

そして変更

var parent = document.getElementById(parentId),
    children,
    elements = [];

もちろん、これは CSS を正しく設定するかどうかに依存します。チェックは行われず、visibilityまたはoverflowなどです。

CSS チェックを追加して、CSS の動作を再確認する場合は、window.getComputedStyleを使用して重要な値を確認できます。

于 2013-05-10T16:09:59.870 に答える
1

以下のコードを試してください

$('div.parentDivStyle div').each(function(index, element){
            alert(this.offsetTop + $(this).height() > $('div.parentDivStyle').height());
        });

子 div が非表示の場合は true を返し、それ以外の場合は false を返します。

フィドルをチェックhttp://jsfiddle.net/3suDz/4/

于 2013-05-10T13:27:47.453 に答える
1

要素の座標の取得に関するこの回答を使用すると、要素が互いにどこにあるかを把握できます。表示領域の座標がわかれば、どの子要素が表示されているかを簡単に把握できます。

これにより、要素が表示されているかどうか、表示されていない場合は、コンテナーに対してどの方向にあるかがわかります。

displayCoords = function(element) {
    var rect = element.getBoundingClientRect();
    console.log(rect.top, rect.right, rect.bottom, rect.left);   

    var childElements = element.children;
    for(i = 0; i < childElements.length; i++)
    {
        childRect = childElements[i].getBoundingClientRect();
        console.log(childRect.top, childRect.right, childRect.bottom, childRect.left);  
        if(childRect.top >=  rect.bottom)
            console.log("not visible -- off the bottom of element");
        else if(childRect.left >= rect.right)
            console.log("not visible -- off the right of element");
        else if(childRect.bottom <= rect.top)
            console.log("not visible -- off the top of element");
        else if(childRect.right <= rect.left)
            console.log("not visible -- off the left of element");
    }

}

ここでJSFiddle をフォークしました

于 2013-05-10T16:29:43.107 に答える
-1

次のように、jQuery の is() 関数を使用できます。

$(element).is(":visible")

したがって、あなたの場合、次のようにします。

var elems = $(".childDivStyle");
for(var i = 0; i < elems.length; i++)
{
    if(!($(elems[i]).is(":visible")))
    {
        // The element is hidden
    }
}
于 2013-05-10T13:24:35.790 に答える