jquery get ID $ (this) .parent(). Parent(). Prev()

Question

Мне удалось получить правильный результат относительно элемента, который я хочу изменить, но теперь мне нужно получить идентификатор предыдущего сиблинга поэтому я могу выполнить действие и на этом. Но я не могу заставить его работать.

Javascript:

  $(".sort-up").click(function() { 
       var curSel = $(this).parent().parent(); 
       var curSelID = $(this).parent().parent().attr("id"); 
       var output = "You clicked on " + curSelID + ".\n"; 
       var curSet = curSelID.split("_"); 
       var curItem = curSet[1]; 
       output = output + "The item ID for this is " + curItem + ".\n"; 
       var classes = $("#" + curSelID).attr("class"); 
       var classGrp = classes.split(" "); 
       var type  = classGrp[classGrp.length - 1]; 
       output = output + "The Type is " + type + ".\n"; 
       var index = $(this).parent().parent().index("."+type); 
       output = output + "The Index is " + index + ".\n"; 
       if (index == 0) { 
        alert("Already at the top, can't move up."); 
       } else { 
        alert(output); 
        var prevSel  = $("#" + curSelID).prev().attr("id"); 
        output   = "Div ID to target is " + prevSel + "\n"; 
        alert(output); 
       } 
      }); 

Когда я выполнить этот сценарий, я получаю все подробности о "текущем" пункте я щелкнул следующий образом:

You clicked on 2_3. 
The item ID for this is 3. 
The Type is Request. 
The Index is 2. 

HTML (: TLDR - просто чтобы показать структура)

  <div class="requests" name="requests" id="requests"> 
       <div name="2_2" id="2_2" class="rowPri pl10 Request"> 
        <div class="sortIcons"> 
         <img class="sort-up" src="../images/sortOrderASC.png"> 
         <img class="sort-down" src="../images/sortOrderDESC.png"> 
         <div class="clr"></div> 
        </div> 
        <div class="req-title request-toggle">Create Public Facing Calendar</div> 
        <div class="req-status">Complete</div> 
        <div class="req-date">06-04-15</div> 
        <div class="clr"></div> 
        <div id="request_2_items" style="display:none;" class="pl45 items"> 
         <div class="pl10 item ui-state-default Item" name="3_6" id="3_6"> 
          <div class="sortIcons"> 
           <img class="sort-up" src="../images/sortOrderASC.png"> 
           <img class="sort-down" src="../images/sortOrderDESC.png"> 
           <div class="clr"></div> 
          </div> 
          <div class="item-details item-toggle">Connect PHP calendar to jCalPro back end</div> 
          <div class="item-status">Complete</div> 
          <div class="item-date">06-04-15</div> 
          <div class="clr"></div> 
          <div id="item_6_comments" style="display:none;" class="pl80 comments"> 
           <div class="pl10"> 
            <div class="com-date">2015-06-04</div> 
            <div class="com-com">Database connected </div> 
            <div class="clr"></div> 
           </div> 
          </div> 
         </div> 

        </div> 
       </div> 
      <span class="divider"></span> 
       <div name="2_8" id="2_8" class="rowPri pl10 Request"> 
        <div class="sortIcons"> 
         <img class="sort-up" src="../images/sortOrderASC.png"> 
         <img class="sort-down" src="../images/sortOrderDESC.png"> 
         <div class="clr"></div> 
        </div> 
        <div class="req-title request-toggle">Do Something</div> 
        <div class="req-status">Complete</div> 
        <div class="req-date">06-04-15</div> 
        <div class="clr"></div> 
        <div id="request_8_items" style="display: block;" class="pl45 items"> 
         <div class="pl10 item ui-state-default Item" name="3_9" id="3_9"> 
          <div class="sortIcons"> 
           <img class="sort-up" src="../images/sortOrderASC.png"> 
           <img class="sort-down" src="../images/sortOrderDESC.png"> 
           <div class="clr"></div> 
          </div> 
          <div class="item-details item-toggle">Do Part of something</div> 
          <div class="item-status">Complete</div> 
          <div class="item-date">06-04-15</div> 
          <div class="clr"></div> 
          <div id="item_9_comments" style="" class="pl80 comments"> 
           <div class="pl10"> 
            <div class="com-date">2015-06-04</div> 
            <div class="com-com">Did a little more</div> 
            <div class="clr"></div> 
           </div> 
           <div class="pl10"> 
            <div class="com-date">2015-06-04</div> 
            <div class="com-com">Did a little</div> 
            <div class="clr"></div> 
           </div> 
          </div> 
         </div> 
         <div class="pl10 item ui-state-default Item" name="3_10" id="3_10"> 
          <div class="sortIcons"> 
           <img class="sort-up" src="../images/sortOrderASC.png"> 
           <img class="sort-down" src="../images/sortOrderDESC.png"> 
           <div class="clr"></div> 
          </div> 
          <div class="item-details item-toggle">Do more of part of something</div> 
          <div class="item-status">Complete</div> 
          <div class="item-date">06-04-15</div> 
          <div class="clr"></div> 
          <div id="item_10_comments" style="" class="pl80 comments"> 
          </div> 
         </div> 

        </div> 
       </div> 
      <span class="divider"></span> 
       <div name="2_3" id="2_3" class="rowPri pl10 Request"> 
        <div class="sortIcons"> 
         <img class="sort-up" src="../images/sortOrderASC.png"> 
         <img class="sort-down" src="../images/sortOrderDESC.png"> 
         <div class="clr"></div> 
        </div> 
        <div class="req-title request-toggle">Create Event Addition page</div> 
        <div class="req-status">Complete</div> 
        <div class="req-date">06-04-15</div> 
        <div class="clr"></div> 
        <div id="request_3_items" style="display:none;" class="pl45 items"> 
        </div> 
       </div> 
      <span class="divider"></span> 
       <div name="2_4" id="2_4" class="rowPri pl10 Request"> 
        <div class="sortIcons"> 
         <img class="sort-up" src="../images/sortOrderASC.png"> 
         <img class="sort-down" src="../images/sortOrderDESC.png"> 
         <div class="clr"></div> 
        </div> 
        <div class="req-title request-toggle">Create Edit Event Page</div> 
        <div class="req-status">Complete</div> 
        <div class="req-date">06-04-15</div> 
        <div class="clr"></div> 
        <div id="request_4_items" style="display:none;" class="pl45 items"> 
        </div> 
       </div> 
      <span class="divider"></span> 
       <div name="2_5" id="2_5" class="rowPri pl10 Request"> 
        <div class="sortIcons"> 
         <img class="sort-up" src="../images/sortOrderASC.png"> 
         <img class="sort-down" src="../images/sortOrderDESC.png"> 
         <div class="clr"></div> 
        </div> 
        <div class="req-title request-toggle">Create Class Cards (Regiatration) page</div> 
        <div class="req-status">Complete</div> 
        <div class="req-date">06-04-15</div> 
        <div class="clr"></div> 
        <div id="request_5_items" style="display:none;" class="pl45 items"> 
        </div> 
       </div> 
      </div> 

по существу, если я нажал на DIV с классом «.request» номером „2_3“ мне нужно чтобы получить предыдущий div с классом «.request», который будет div для «2_8». Затем я буду использовать это как вызов AJAX, чтобы поменять порядок этих элементов в базе данных, а затем на экране, но для жизни я не могу получить идентификатор «предыдущего» div.

Этот же скрипт будет работать и над классом «.item», например, «3-10», чтобы получить идентификатор div «3-9». Я пишу этот скрипт для работы на любом уровне, поэтому мне не нужно писать его дважды.

Я исследовал .parent(), .prev() и т. Д. И не смог получить рабочий метод. Любая помощь будет оценена по достоинству.

Update 1:

Я попытался адаптировать ответ ниже, чтобы «двигаться» пунктов, но это, кажется, своего рода круговике братья и сестры выше той, которую я нажал вместо того, чтобы просто переместить один я щелкнул выше его предыдущего брата. вот Javascript я попробовал:

if (index == 0) { 
    alert("This item is already top priority."); 
} else { 
    var swapSel = curSel.siblings().prev(); 
    $(curSel).before($(swapSel)); 
} 

Update 2:

Я возился с ним, и был в состоянии получить его, чтобы переместить DIV в вопросе выше его «предыдущий» собрата, без использования братья и сестры(), поскольку это поднимало ситуацию. Я завершил UP и DOWN движется с моей существующей HTML структуры, как показано выше, с использованием следующего Javascript:

$(".sort-up").click(function() { 
    var curSel = $(this).parent().parent(); 
    var curSelID = $(this).parent().parent().attr("id"); 
    var curSet = curSelID.split("_"); 
    var curItem = curSet[1]; 
    var classes = $("#" + curSelID).attr("class"); 
    var classGrp = classes.split(" "); 
    var type  = classGrp[classGrp.length - 1]; 
    var index = curSel.index(); 
    if (index <= 0) { 
     alert("This " + type + " is already highest priority."); 
    } else { 
     var swapSel = curSel.prev(); 
     var swapSelID = swapSel.attr("id"); 
     $(curSel).insertBefore($(swapSel)); 
    } 
}); 
$(".sort-down").click(function() { 
    var curSel = $(this).parent().parent(); 
    var curSelID = $(this).parent().parent().attr("id"); 
    var holder = curSel.parent(); 
    var curSet = curSelID.split("_"); 
    var curItem = curSet[1]; 
    var classes = $("#" + curSelID).attr("class"); 
    var classGrp = classes.split(" "); 
    var type  = classGrp[classGrp.length - 1]; 
    var index = curSel.index(); 
    var lastIndex = curSel.siblings().andSelf().length - 1; 
    if (index >= lastIndex) { 
     alert("This " + type + " is already lowest priority."); 
    } else { 
     var swapSel = curSel.next(); 
     var swapSelID = swapSel.attr("id"); 
     $(curSel).insertAfter($(swapSel)); 
    } 
}); 

Answer 1

использовать метод братьев и сестер, чтобы получить братьев и сестер на ваш объект curSel, а затем использовать метод пред() для получите один до вашего выбора. Вы можете изменить его следующим образом:

var prevSel  = curSel.siblings().prev().attr('id'); 

JS FIDDLE of your example

Update:

для измененного вопроса о цит:

ваш HTML является немного странным, но это, кажется, делать то, что вы хотите. Мне пришлось использовать идентификатор предыдущего сиблинга, чтобы заставить insertBefore (а не раньше) работать. Кроме того, вам нужно выяснить, что делать с этими разделителями. Кроме того, у вас есть вложенные элементы, которые могли бы не проверять наличие вершины их вложенной иерархии, поэтому вам нужно будет справиться с этим.

$(curSel).insertBefore($('#'+prevSel));

Updated fiddle

Final Edit:

так это выглядит как проблема была комбинация этого делителя охватывает вы используете и ссылка несвежего элемента, который, по-видимому известная ошибка в JQuery ,

Если вы переделаете элемент с щелчком после перемещения предыдущего элемента, удалите исходный разделительный сегмент, разделив его, а затем добавьте новый разделительный диапазон после первого элемента, он работает так, как ожидалось. см. мою обновленную скрипку.

THIS WAS ANNOYING