获得$(this).parent().parent().prev()的ID
获得$(this).parent().parent().prev()的ID
提问于 2015-06-05 02:35:15
我已经能够获得关于我想要修改的元素的正确输出，但是现在我需要获得上一个兄弟姐妹的ID，这样我也可以对这个元素执行一个操作。但我似乎无法让它发挥作用。
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>本质上，如果我单击类".request“编号为"2_3”的div，则需要得到前面带有".request“类的div，这将是"2_8”的div。然后，我将使用它作为AJAX调用来交换数据库中这些项的顺序，然后在屏幕上也使用，但对于我来说，我似乎无法获得“以前”同级div的id。
同样的脚本也适用于类".item“，比如需要获得"3-9”的div的"3-10“。我写这个脚本是为了在两个层次上工作，所以我不需要写两遍。
我研究过.parent()、.prev()等。还没能找到一种有效的方法。任何帮助都将不胜感激。
更新1:
我试着调整下面的答案，以“移动”项目，但它似乎是一种循环的兄弟姐妹以上的一个我点击了，而不是只是移动一个，我点击高于它以前的兄弟姐妹。以下是我尝试过的Javascript：
if (index == 0) {
alert("This item is already top priority.");
} else {
var swapSel = curSel.siblings().prev();
$(curSel).before($(swapSel));
}更新2:
我把它弄得乱七八糟，并能让它把这个有问题的DIV移动到它的“前一个”兄弟姐妹之上，而不用兄弟姐妹()，因为这会让事情变得更糟。我已经用我现有的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));
}
});回答 1
Stack Overflow用户
回答已采纳
发布于 2015-06-05 02:42:59
使用兄弟姐妹方法获取curSel对象的兄弟姐妹，然后使用prev()方法在cur选择之前获得该方法。您可以这样修改它：
var prevSel = curSel.siblings().prev().attr('id'); JS摆弄你的例子
更新：
关于修改后的任择议定书问题：
你的html有点奇怪，但这似乎能做你想做的事。最后，我不得不使用以前的insertBefore (而不是以前)的id来工作。此外，您还需要弄清楚如何处理这些分隔跨度。另外，您有嵌套项，这些项可能没有检查是否位于嵌套层次结构的顶部，因此您需要处理这些问题。
$(curSel).insertBefore($('#'+prevSel));
更新小提琴
最后编辑：
因此，问题似乎是您所使用的分隔器跨度和一个陈旧元素引用的组合，后者显然是jquery中已知的一个bug。
如果在移动前一个元素后重采样单击元素，则删除分隔它们的原始分隔器跨度，然后在现在的第一个元素之后添加一个新的分隔器跨度，它将按预期工作。看看我最新的小提琴。
这很烦人
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/30657466
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号