Question

我看到很多问题几乎与此类似，但我无法找到解决方案。

当我点击.FixedHeightDiv { float:right; height: 250px; width:250px; padding:3px; background:#f00; } .Content { height:224px; overflow:auto; background:#fff; } <div class="FixedHeightDiv"> <h2>Title</h2> <div class="Content"> your content your content your content your content your content your content your content your content your content your content your content </div>课程时，我希望找到其他下一个target课程。这是我到目前为止所做的，但它似乎无法奏效。

提前谢谢！

＆＃13;

target

＆＃13;

$(document).ready(function(){
   $('.target').click(function(){
     if ($(this).parent().next().is('.target')) {
        var link = $(this).parent().next().is('.target');
        console.log(link.text());
     }
   })
})

＆＃13;

Answer 1

＆＃13;

$(document).ready(function() {
  $('.target').click(function() {
    console.log($(this).parent().next('li').find('.target').text());
    console.log($(this).parent().next('li').find('div').hasClass('target'))
    if($(this).parent().next('li').find('div').hasClass('target')){//true if there is next parent li with div with class name target
      
    
    }
  })
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<ul>
  <li>
    <div class="image-here"></div>
    <div class="target">First description</div>
  </li>
  <li>
    <div class="image-here"></div>
    <div class="target">Second description</div>
  </li>
  <li>
    <div class="image-here"></div>
    <div class="target">Third description</div>
  </li>
  <li>
    <div class="image-here"></div>
    <div class="target">Fourth description</div>
  </li>
</ul>

＆＃13;

获取下一个li后使用.find()获取类target

的元素

Answer 2

您的next()元素将为<li>并且.is('.target')正在检查<li>是否有.target类。我认为做.find('.target')代替.is('.target')

会更好

＆＃13;

$(document).ready(function() {
  $('.target').click(function() {
    var nextParent = $(this).parent().next();

    if (nextParent.length) {
      console.log(nextParent.find('.target').text());
    } else {
      console.log('End of line');
    }
  })
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
    <div class="image-here"></div>
    <div class="target">First description</div>
  </li>
  <li>
    <div class="image-here"></div>
    <div class="target">Second description</div>
  </li>
  <li>
    <div class="image-here"></div>
    <div class="target">Third description</div>
  </li>
  <li>
    <div class="image-here"></div>
    <div class="target">Fourth description</div>
  </li>
</ul>

＆＃13;

Answer 3

这就是我要做的事情：

$('.target').click(function() {
 console.log($(this).closest("li").next().find(".target").text());
})

Here is the JSFiddle demo

Answer 4

您可以使用.parent()/.closest()/.parents()查找当前点击元素的父级，并使用.next()查找下一个元素，使用.find()查找目标

＆＃13;

$(document).ready(function(){
   $('.target').click(function(){
        console.log($(this).closest("li").next().find('.target').text());
   });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
   <li>
      <div class="image-here"></div>
      <div class="target">First description</div>
   </li>
   <li>
     <div class="image-here"></div>
      <div class="target">Second description</div>
   </li>
    <li>
      <div class="image-here"></div>
      <div class="target">Third description</div>
   </li>
    <li>
       <div class="image-here"></div>
       <div class="target">Fourth description</div>
   </li>
</ul>

＆＃13;

查找下一个并从子元素单击中预览子元素

4 个答案: