0

HTML:

<div class="find_div" id="some_id_1"></div>

<!-- other divs -->

<div class="find_div" id="some_id_2"></div>

    <!-- other divs -->


<div class="find_div" id="some_id_3"></div>

<!-- other divs -->

    <div class="target_div"></div>


<div class="find_div" id="some_id_4"></div>

<!-- other divs -->

<div class="find_div" id="some_id_5"></div>

    <!-- other divs -->


<div class="find_div" id="some_id_6"></div>

<!-- other divs -->

find_div1)に最も近い を見つける方法は target_div?

2)find_div結果的にあまり接近していない他のdivを見つける方法は?

議論されているケースに先祖関係がないことに注意してください。したがって、jaqueryclosest()はここでは有効ではないと思います。

以前にここで関連する問題について質問した後、この質問をします。重複しないことを願っています。

編集:行の前に数行のコードを追加しましたtarget_div。

4

3 に答える 3

1

.nextAll（）を試してください-指定されたセレクターに一致する後続のすべての兄弟を取得します

$('.target_div').nextAll('.find_div').first();// gets closest one after

$('.target_div').nextAll('.find_div').eq(0) // <-- index of where they are in the collection

編集

前のdivと次のdivの計算をいくつか実行し、位置を取得してどちらが近いかを確認する必要があります。

var $tdiv = $('.target_div');
var $prev = $tdiv.prevAll('.find_div').first();// prev .find_div div
var $nex = $tdiv.nextAll('.find_div').first();// next .find_div div
var closest;
// get distance between bottom of prev div and top of target div
var $prevDistance = $tdiv.position().top - ($prev.position().top + $prev.height());
// get distance between bottom of target div and top of next div
var $nexDistance = $nex.position().top - ($tdiv.position().top + $tdiv.height());

// if prev div distance is less than next div - closest == prev div
if ($prevDistance < $nexDistance) {
    closest = $prev;
} else {
    closest = $nex;
}
// now you can do whatver you want with the closest element
closest.dowhatever
// or if you want to do something to all others except closest
$('.find_div').not(closest).dowhatever

フィドル

于 2012-11-02T12:47:24.047 に答える
0

使用できますnextAll:

1）

$('.target_div').nextAll(".find_div").first()

2）

$('.target_div').nextAll(".find_div").not(':first')
于 2012-11-02T12:48:22.070 に答える
0

横断的なDOMメソッドには「一方向」があるため、最善の策は「body」タグ要素から始まり、DOMを下降してすべての要素を取得するようです。これは最適化する必要がありますが、一般的なアイデアを得るために、次のjsFiddleを見てください: (等しい場合、これは 2 つの DOM 要素を返します)

 var domElems = $('body').find('*'),
    index = 0,
    targetIndex, prevIndex, nexttIndex, grabbedElems = [],
    results = [];

for (var i = 0, z = domElems.length; i < z; i++) {
    index++;
    if ($(domElems[i]).is('.find_div')) grabbedElems[index] = $(domElems[i]);
    else if ($(domElems[i]).is('.target_div')) targetIndex = index;
}

for (var i = 0, z = grabbedElems.length; i < z; i++) {
    if (grabbedElems[i]) {
        if (i < targetIndex) prevIndex = i;
        else if (i > targetIndex) {
            nextIndex = i;
            break;
        }
    }
}

if (Math.abs(prevIndex - targetIndex) <= Math.abs(nextIndex - targetIndex)) results.push(grabbedElems [prevIndex]);

if (Math.abs(nextIndex - targetIndex) <= Math.abs(prevIndex - targetIndex)) results.push(grabbedElems [nextIndex]);

if (results.length > 0) console.log(results[0]);
if (results.length > 1) console.log(results[1]);​
于 2012-11-02T14:11:50.677 に答える