Получить последний div в ряду плавающих div

Question

У меня есть несколько div, плавающих в нескольких строках.Div содержит предварительный просмотр текста и ссылку для скольжения вниз по всему содержимому (см. Пример http://jsfiddle.net/yDcKu/).

Что происходит сейчас: когда вы сдвигаете div-контент, он открывается сразу после подключенного предварительного просмотра.Я хочу, чтобы это произошло: откройте div-содержимое после последнего div в строке.

Я предполагаю, что это можно сделать следующим образом:
1. выясните, какой div является последним в строкеактивированный предварительный просмотр,
2. добавьте id к этому div и
3. добавьте div-контент к этому div.

У меня есть решение для шагов 2 и 3 с использованием jQuery, но без догадоккак сделать первый шаг.Мне удается получить ширину документа и значения x и y каждого элемента div, но я понятия не имею, как определить, какой элемент div имеет самое высокое значение x, а также самое высокое значение y и находится в рядуактивированный предварительный просмотр Div.

Есть идеи кто-нибудь?Спасибо

Answer 1

Вот пример, который делает то, что вы хотите.Я упростил ваш код, поэтому вам не нужно вручную идентифицировать каждую запись и предварительный просмотр.

http://jsfiddle.net/jqmPc/1/

Это немного сложно.Дайте мне знать, если у вас есть вопросы.

Как правило, при изменении размера окна сценарий проходит и находит первый предварительный просмотр в каждой строке, находя предварительный просмотр с тем же левым смещением, что и у самого первого.Затем он добавляет класс last к записи до (предыдущая строка) и класс first к этому предварительному просмотру.Я делаю css clear: left на обоих из них, чтобы все открывалось нормально при открытии записей.

Я сделал ваш код универсальным, без идентификаторов:

<div class="preview">
    <p>Some preview text <a class="trigger" href="#">&hellip;</a></p>
</div>

<div class="entry">
  <div class="close_button">
    <a class="close" href="#">&times;</a>
  </div>
  <p>Some content text.</p>
</div>

Это не заставляет васпишите один и тот же код снова и снова.

Сценарий открытия / закрытия:

 $('.trigger').click(function() {
    $('.openEntry').slideUp(800); // Close the open entry
    var preview = $(this).closest('.preview');  // Grab the parent of the link

    // Now, clone the entry and stick it after the "last" item on this row:
    preview.next('.entry').clone().addClass('openEntry').insertAfter(preview.nextAll('.last:first')).slideDown(800);
});

// Use "on()" here, because the "openEntry" is dynamically added 
// (and it's good practice anyway)
$('body').on('click', '.close', function() {
    // Close and remove the cloned entry
    $('.openEntry').slideUp(800).remove();
});

Я уверен, что это можно немного упростить, особенно если вы готовы переформатировать свой HTML aнемного больше, поместив запись в элемент предварительного просмотра (но все еще скрытый).Вот немного более простая версия с html-изменением:

http://jsfiddle.net/jqmPc/2/

(я также окрашиваю первый и последний элемент в строке, чтобы вы могли видеть, что происходит)

Answer 2

Я искал то же самое, но для одного элемента, чтобы добавить стиль к первому и последнему элементам. @ Jeff B ответ помог мне так изменить и использовать его для меня на одном элементе.Таким образом, поисковая фраза «Получить последний div в ряду плавающих div» и кто-то ищет то же, этот код может быть полезным:

Fiddle: https://jsfiddle.net/kunjsharma/qze8n97x/2/

JS:

$(function() {
    $(window).on('resize', function() {
        var startPosX = $('.preview:first').position().left;
        $('.preview').removeClass("first last");
        $('.preview').each(function() {
            if ($(this).position().left == startPosX) {
                $(this).addClass("first");
                $(this).prevAll('.preview:first').addClass("last");
            }
        });
        $('.preview:last').addClass("last");
    });
    $(window).trigger('resize');
});

CSS:

.preview {
    float: left;
}

HTML:

<div class="preview">
    <p>Some preview text</p>
</div>
<div class="preview">
    <p>Some preview text</p>
</div>
<div class="preview">
    <p>Some preview text</p>
</div>
<div class="preview">
    <p>Some preview text</p>
</div>

Answer 3

У меня та же проблема, что и у вас, и я был перенаправлен на этот вопрос. Но я думаю, что ответ слишком сложен для моих нужд. Так что я сделал свой собственный путь. Предположительно, вы получаете свой список div из JSON, вы можете сделать это:

product[0] = {id: "name1", text: "text1"}
product[1] = {id: "name2", text: "text2"}
product[2] = {id: "name3", text: "text3"}

private getLastElement(id, products) {
    const getTop = (id) => $("#" + id).position().top;
    let itemPos = getTop(id);
    let itemIndex = products.map(x => x.id).indexOf(id);
    let lastID = itemIndex;
    while (lastID < products.length - 1) {
        if (getTop(products[lastID + 1].id) > itemPos) break;
        lastID++;
    }
    return products[lastID].id;
}

Но вы также можете узнать это, собрав все идентификаторы внутри вашей обертки.

Работает путем сканирования позиции строки следующего идентификатора и возврата последнего идентификатора той же строки.

Answer 4

$([1,2]).each(function(idx,el) {
 $("#entry" + el).hide().insertAfter("div.entry:last");
 $("#trigger" + el).click(function() {
     $("#entry" + el).slideDown('800');
 });   
 $("#close" + el).click(function() {
     $("#entry" + el).slideUp('800');
 });            
});​

http://jsfiddle.net/yDcKu/11/

Answer 5

Я не могу правильно понять ваш вопрос, но если вы хотите найти последний элемент div в документе, вы можете сделать что-то вроде этого

$("div:last")

, так что это даст вам последний div издокумент

Ссылка:

http://api.jquery.com/last-selector/

Answer 6

Вы можете просто получить последний div в массиве после вызова getElementsByTagName.

var divArray = wrapperDiv.getElementsByTagName("div");
if(divArray.length > 0)
    var lastDiv = divArray[divArray.length-1];
else
    console.log("Empty!");