如何在jQuery中获取最接近的前一个元素?

时间:2015-06-07 01:32:13

标签: javascript jquery

我想从当前选定的对象标签中获取最接近的对象标签。但它必须严格控制在上面。假设我有id为A的对象。如何在其上方获得最接近的物体标签?在这种情况下,我想获取标识为B的对象标记。每个div容器都可以包含一个对象标记或其他内容。

<div class="message">
    <span></span>
</div>
<div class="message">
    <object id="C"></object>
</div>
<div class="message">
    <object id="B"></object>
</div>
<div class="message">
    <span></span>
</div>
<div class="message">
    <object id="A"></object>
</div>
<div class="message">
    <object id="Z"></object>
</div>

3 个答案:

答案 0 :(得分:2)

假设this是ID为A

的对象
$(this).closest('.message').prevUntil('.message:has(object)').prev().find('object');

FIDDLE

遍历最近的.message然后检查以前的元素,直到找到包含object标记的元素,然后停止,但它停在该标记之前的元素处,所以我们调用{{ 1}}更进一步,然后使用prev查找对象标记。

答案 1 :(得分:1)

您可以使用prev()获取上一个兄弟元素。这会让你在那里,但由于每个“消息”div都不能保证包含object元素,因此您需要使用prevUntil()或运行自己的迭代/搜索。< / p>

例如:

var lastObj = $("#A");
var parent = lastObj.parent();
var previousObject = parent.prevUntil(".message:has(object)").prev().find("object");

或没有prevUntil()

var lastObj = $("#A");
var parent = lastObj.parent();
var previousObject = undefined;
while (parent.length > 0 && ! previousObject) {
    parent = parent.prev();
    if (parent.find("object").length > 0) {
        previousObject = parent.find("object");
    }
}

或者作为可运行的代码段(使用类而不是object标记):

$(".object").click(function(){
  var myId = this.id;
  var prevId = undefined;
  var parent = $(this).parent();
  var previousObject = undefined;
  while (parent.length > 0 && ! previousObject) {
    parent = parent.prev();
    if (parent.find(".object").length > 0) {
        previousObject = parent.find(".object");
        prevId = previousObject.attr("id");
    }
  }
  
  alert("clicked=" + myId + ", previous=" + prevId);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="message">
    <span></span>
</div>
<div class="message">
    <span class="object" id="C">C</object>
</div>
<div class="message">
    <span class="object" id="B">B</object>
</div>
<div class="message">
    <span></span>
</div>
<div class="message">
    <span class="object" id="A">A</object>
</div>
<div class="message">
    <span class="object" id="Z">Z</object>
</div>

答案 2 :(得分:1)

另一种选择:

var objs=$('object').toArray();
$('.message').on('click',function(){
    var elem=$(this).children().get(0);
    if(objs.indexOf(elem)-1>=0){
        console.log(objs[objs.indexOf(elem)-1]);
        console.log(objs[objs.indexOf(elem)-1].id);
    }
});