演示：http://jsfiddle.net/abdennour/PU54r/

Question

我有div中的元素，如下所述：

   <div id="container">
     <div id="first_div">
        <div id="comment-1" class="comment">Child 1 of first div</div>
        <div id="comment-2" class="comment">Child 2 of first div</div>
        <div id="comment-3" class="comment">Child 3 of first div</div>
        <div id="comment-4" class="comment">Child 4 of first div</div>
     </div>
     <div id="second_div">
        <div id="comment-5" class="comment">Child 1 of second div</div>
        <div id="comment-6" class="comment">Child 2 of second div</div>
        <div id="comment-7" class="comment">Child 3 of second div</div>
        <div id="comment-8" class="comment">Child 4 of second div</div>
     </div>
     <div id="third_div">
        <div id="comment-9" class="comment">Child 1 of third div</div>
        <div id="comment-10" class="comment">Child 2 of third div</div>
        <div id="comment-11" class="comment">Child 3 of third div</div>
        <div id="comment-12" class="comment">Child 4 of third div</div>
     </div>

我需要从评论ID comment-4中检索下一个元素。

$('#comment-4').next().attr('id')给我结果为undefined。我需要将目标div作为注释id - comment-5。如何使用jquery从另一个div中检索div的下一个元素？

Answer 1

试试这个：

$(function(){
    $('.comment').click(function(index){
      var id;
      if ( $(this).is(':last-child') )
          id = $(this).parent().next().children(':first').attr('id');
       else
          id = $(this).next().attr('id'); 
       alert(id);    
    });
});

<强> Demo

Answer 2

演示：http://jsfiddle.net/abdennour/PU54r/

function nextOf(id,cyclic){
  var ids= $('div[id^=comment-]').toArray().map(function(e){return $(e).attr('id')}).sort();
  var idx=ids.indexOf("comment-"+id);
   if(idx!==-1){
      if(ids.length> idx+1){
        return $('div#'+ids[idx]);
      }   
       else{

            // it is the last div: if it is cyclic ,you may return the first 
            if(cyclic){
                return $('div#'+ids[0]);
            }
      }
   }else{
       // no div with this id
    }

}

然后：

var target=nextOf(4)  
if(target){
  target.html()
  //--> Child 1 of second div
}

Answer 3

我认为您可以使用$('.comment')来获取您想要的所有内容，并将其保存在某些变量中，例如var arrResult = $('.comment');。

到目前为止，您可以使用arrResult变量选择您想要的内容。

Answer 4

因为你最内心的div有不同的父母，我会先得到你关心的所有div：

var comments = $('.comment');

接下来，如果我们可以假设您的id都按顺序编号，请获取id中的数字（假设this引用该元素）：

var index = parseInt($(this).attr('id').substr(8));

现在，评论列表中的下一个div位于评论中的该位置：

var nextDiv = comments[index];

为了好的衡量，我首先要确保设置index：

var nextDiv;
if (index < comments.length) {
  nextDiv = comments[index];
}

Answer 5

您可以在案例中使用索引：

JS：

for (var index = 0; index <= 12; ++index) {
    $("#comment-" + index).attr("id");
}

Answer 6

为什么不定义这个：$('#comment-4').next().attr('id')因为没有下一个元素。正如你提到的那样，你想在下一个div的孩子中定位#comment-5，那么你可以这样做：

function giveId(el) {
    var sel = el.id ? '#'+el.id : '.'+el.className;
    var id = $(sel).next('div').length ? $(sel).next('div').attr('id') : $(sel).parent('div').next('div').find('> div:first').attr('id');

    return id || "Either no next elem exist or next elem doesnot have any id/class.";
}


$(function () {
    $('div').click(function (e) {
        e.stopPropagation();
        alert(giveId(this));
    });
});

Updated Demo in action

Answer 7

假设在$comment中收集了jQuery包装的元素，有一种方法可以解决它：

function getNextComment($comment) {
  var $nextComment = $comment.next();
  if ($nextComment.length) {
    return $nextComment;
  }

  var $nextParent = $comment.parent().next();
  if ($nextParent.length) {
    return $nextParent.children().first(); 
  }

  return null;
}

Demo。点击一个评论 - 然后看到下一个评论突出显示。）

基本算法在这里非常简单。首先，我们尝试检索给定元素的下一个兄弟。如果有，则立即返回。如果不是（问题就是#comment-4的情况 - 它是其层次结构中的 last 元素），我们就会为其父级提供DOM链（在这种情况下为#first-div），并查找其下一个兄弟（#second-div）。如果存在，则返回其第一个子元素。如果没有，则返回null（我们实际上可以返回一个空的jQuery对象 - $()，但这取决于用例。

Answer 8

您可以定义一个语句来检查目标ID是最后一个子项，而不是根据值返回一个函数。

jsFiddle Demo

var target = 'comment-4';
$('.comment').each(function(i) {
    if ( $(this).attr('id') == target ) {

        if ( $(this).is(':last-child') ) {
            $(this).parent().next().children().first().addClass('red');
        }else{
            $(this).next().addClass('red');
        }

    }
});

Answer 9

它显示未定义，因为comment-4和comment-5是不同父元素的子元素。方式comment-4是first_div的父级second_div和comment-5的父级。

您可以使用以下代码获取comment-5。

$('#comment-4').parent().next().children().attr('id');

Answer 10

以下是一种方法 - http://jsfiddle.net/jayblanchard/WLeSr/

$('a').click(function() {
    var highlight = $('.highlight');
    var currentIndex = $('.comment').index(highlight); // get the index of the currently highlighted item
    $('.comment').removeClass('highlight'); 
    var nextIndex = currentIndex + 1;
    $('.comment').eq(nextIndex).addClass('highlight');
});

Answer 11

只需一条指令：）

$('<div id="mock" />').append($('.comment').clone()).find('#comment-4').next().attr('id')//---> comment-5

基于div具有相同的Css类.comment

DEMO

Answer 12

试试这个：JSFiddle（最简单的解决方案！）

$(document).ready(function(){
    var currDiv = $("#comment-4"); // Try with different valies: "#comment-x"
    currDivId = currDiv.prop('id');
    lastDivId = currDiv.parent('div').find('.comment').last().prop('id');
    if(currDivId == lastDivId){
        var nextComment = currDiv.parent('div').next('div').find('.comment').prop('id');
    }else{
        var nextComment = currDiv.parent('div').find('.comment').next().prop('id');
    }
    alert(nextComment); 
});

如何从另一个div中找到div的元素

12 个答案:

演示：http://jsfiddle.net/abdennour/PU54r/

Updated Demo in action

只需一条指令：）

DEMO