jQuery使用untilNext()>后人

时间:2013-08-28 23:07:23

标签: jquery

我需要获取子元素h2之间的所有.section元素。 我的代码切换了所有元素; untilNext(a b)没有选择带有后代b的元素。我是否需要另一种方法或者我没有看到的错误?

HTML: “

<div class='section' id='section-4'>
<div class='docs'>
  <div class='octowrap'>
    <a class='octothorpe' href='#section-4'>#</a>
  </div>
  <h2>todo     <br></h2>
   <p>main.html   <br></p>
</div>
<div class='code'>
  <div class="highlight"><pre><span class="n">colorific</span></pre></div>
</div>
</div>
<div class='clearall'></div>
<div class='section' id='section-5'>
<div class='docs'>
  <div class='octowrap'>
    <a class='octothorpe' href='#section-5'>#</a>
  </div>
  <p>containers  <br></p>
</div>
<div class='code'>

</div>
<div class='clearall'></div>
<div class='section' id='section-6'>
 <div class='docs'>
  <div class='octowrap'>
    <a class='octothorpe' href='#section-6'>#</a>
  </div>
  <h2>nextH2</h2>
 </div>
 <div class='code'>
  <div class="highlight"><pre><span class="n">blah</span></pre></div>
 </div>
 </div>
 <div class='clearall'></div>

转换为:

great-grandparent <div class='section' id='section-18'>
   grandparent       <div class='docs'>
    parent        <div class='octowrap'>
        *          <a class='octothorpe' href='#section-18'>#</a>
        h2        <h2> </h2>

JS:

$(function(){                                                                                                                      |   
$('.octothorpe').on({                                                                                                          |-  vimwiki_docs.py (/home/solver/webpag1)
    click:function(e){                                                                                                         |   
        e.preventDefault();                                                                                                    |-  vimwiki_docs.html (/home/solver/webpag1/docs)
        var $pfold = $(this).closest('.octowrap').siblings('p');                                                               |   
        var $cfold = $(this).closest('.docs').siblings('.code');                                                               |-  knowl.js (/home/solver/webpag1/docs)
        var $sector = $(this).closest('.section');                                                                             ||-   global
        var $h2 = $sector.nextUntil('.section > h2');                                                                          |||     knowl_id_counter
        //var $h2 = $sector.nextAll('div').each(function(){                                                                    ||  
        //  //this within iteration refers to h2 div element                                                                   ||-   function
        //  if ($(this).is('h2')) {                                                                                            |||     knowl_click_handler
        //      return false;                                                                                                  |   
        //  }})                                                                                                                |   ~                                              
                                                                                                                               |   ~                                              
        //});//close each()                                                                                                    |   ~                                              
        $pfold.toggleClass('fold');                                                                                            |   ~                                              
        $cfold.toggleClass('fold');                                                                                            |   ~                                              
        $h2.toggleClass('fold');                                                                                               |   ~                                              
            //console.log('h2', $h2)                                                                                           |   ~                                              
            //if (!$h2.hasClass("fold") && !$pfold.hasClass("fold") && !$cfold.hasClass("fold")) {                             |   ~                                              
            //  $cfold.slideUp().addClass('fold');                                                                             |   ~                                              
            //  $pfold.slideUp().addClass('fold');                                                                             |   ~                                              
            //  $h2.slideUp().addClass('fold');                                                                                |   ~                                              
            //}                                                                                                                |   ~                                              
            //else {                                                                                                           |   ~                                              
            //  $cfold.slideDown().removeClass('fold');                                                                        |   ~                                              
            //  $pfold.slideDown().removeClass('fold');                                                                        |   ~                                              
            //  $h2.slideDown().removeClass('fold');                                                                           |   ~                                              
            //}                                                                                                                |   ~                                              
                                                                                                                               |   ~                                              
    }});                                                                                                                       |   ~                                              

});

我尝试了nextUntil和nextAll并返回false ...没有运气!

非常感谢任何帮助。 感谢

1 个答案:

答案 0 :(得分:0)

我想出来了,如果其他新手jQuery api遇到同样的问题,我会回答: `

 var $sector = $(this).nextUntil('section:has(h2)').slice(0,-1);

`

  1. 所以我在孩子的位置上有一个h2。使用最接近的我可以去祖父母div.section:

  2. 现在我想搜索下一个h2,也是一个孩子。如果我希望所有元素都在第一个匹配项中,请使用nextUntil()。 {按照评论中的建议查找您要搜索的所有项目,而不是所需的设置}

    nextUntil()只选择兄弟姐妹。因此,使用has()来选择子/后代。

  3. 我需要切片最后一个元素。我玩了一段:not(:last)没有太多运气,所以在jQuery中发现切片让事情变得简单。