http://jsbin.com/juqenojo/1

оно?

твои варианты чутка другие :

http://jsbin.com/ledexusa/1

$('h2').each(function (i) {
  
  $(this).
    css('color', 'red').
    text('h2: ' + i).
  
      parents(':first').andSelf().
  
      prev('h1, *:has(h1)').
  
          text('h1: ' + i).
          css('color', 'blue');
  
});

Странно, вроде бы как работает, но я не могу понять как. Что делает andSelf()? Вроде бы кода раз два и обчёлся а в голове хаос, неразбериха... Ещё не могу понять как :has() работает, даже догадаться не получается.

Дома жара, весь мокрый, не могу думать.

Поеду прокачусь на доске лучше. Спасибо!

точнее, даже так:

$('h2').each(function (i) {
  
  $(this).
    css('color', 'red').
    text('h2: ' + i).
  
      parents('div:last').andSelf().
  
        prev('h1, div:has(h1)').
  
          text('h1: ' + i).
          css('color', 'blue');
  
});

теперь поясню:

$('h2').each(function (i) {
  
  $(this).
    css('color', 'red').
    text('h2: ' + i).
  
*!*
      parents('div:last').andSelf().
*/!*
  
        prev('h1, div:has(h1)').
  
          text('h1: ' + i).
          css('color', 'blue');
  
});

Эта строчка найдёт DIV на самом верхнем уровне вложенности, считая от h2... (это не всё)

выделен жёлтым:

вот:

ещё:


и поместит в список к найденному элементу и сам элемент h2 (andSelf).

....
Далее,

$('h2').each(function (i) {
  
  $(this).
    css('color', 'red').
    text('h2: ' + i).
  

      parents('div:last').andSelf().

 *!* 
        prev('h1, div:has(h1)').
 */!*
 
          text('h1: ' + i).
          css('color', 'blue');
  
});

Пройдётся по элементам предыдущей выборки (div на верхнем уровне, или сам h2) и найдёт предыдущий h1, или div, внутри которого есть h1

в инете есть документация по селектору has, и по всем методам ...

Нафиг это ваше jquery.

<div>
    <h1>title</h1>
</div>
<h2>title</h2>
<script>
var nodes = document.getElementsByTagName('*'), i = nodes.length;
var el = document.querySelector('h2'), findTag = 'H1';
while(i--) if(nodes[i] === el) break;
while(i--) if(nodes[i].tagName === findTag) break; 
if(nodes[i]) nodes[i].style.color='#f00';
</script>

<div>
    <h1>title</h1>
</div>
<div>
    <h2>title</h2>
</div>
<script>
var nodes = document.getElementsByTagName('*'), i = nodes.length;
var el = document.querySelector('h2'), findTag = 'H1';
while(i--) if(nodes[i] === el) break;
while(i--) if(nodes[i].tagName === findTag) break; 
if(nodes[i]) nodes[i].style.color='#f00';
</script>

<h1>title</h1>
<div>
    <h2>title</h2>
</div>
<script>
var nodes = document.getElementsByTagName('*'), i = nodes.length;
var el = document.querySelector('h2'), findTag = 'H1';
while(i--) if(nodes[i] === el) break;
while(i--) if(nodes[i].tagName === findTag) break; 
if(nodes[i]) nodes[i].style.color='#f00';
</script>

<h1>title</h1>
<h2>title</h2>
<script>
var nodes = document.getElementsByTagName('*'), i = nodes.length;
var el = document.querySelector('h2'), findTag = 'H1';
while(i--) if(nodes[i] === el) break;
while(i--) if(nodes[i].tagName === findTag) break; 
if(nodes[i]) nodes[i].style.color='#f00';
</script>

<div>
    <h1>title</h1>
</div>
<div>
    <h1>title</h1>
</div>
<div>
    <h2>title</h2>
</div>
<script>
var nodes = document.getElementsByTagName('*'), i = nodes.length;
var el = document.querySelector('h2'), findTag = 'H1';
while(i--) if(nodes[i] === el) break;
while(i--) if(nodes[i].tagName === findTag) break; 
if(nodes[i]) nodes[i].style.color='#f00';
</script>

<div>
    <h1>title</h1>
    <h1>title</h1>
</div>
<div>
    <h1>title</h1>
    <h1>title</h1>
</div>
<div>
    <h1>title</h1>
</div>
<div>
    <h2>title</h2>
</div>
<script>
var nodes = document.getElementsByTagName('*'), i = nodes.length;
var el = document.querySelector('h2'), findTag = 'H1';
while(i--) if(nodes[i] === el) break;
while(i--) if(nodes[i].tagName === findTag) break; 
if(nodes[i]) nodes[i].style.color='#f00';
</script>

Думаю, с ним было бы быстрей и приятней для глаз, нет? Или ты скажешь, что может быть приятней чистого кода и что быстрей написать свою функцию чем искать плагин (не буду упомянать чего). Вообще я с тобой согласен, очень рад что есть такие грамотные люди как ты. А как звучит-то Ведь MELKY не плох, но фраза зачёт :)

Жаль что я не могу внедрить ни первый ни второй пример в свой код. И так и эдак пытаюсь, но не получается.

var lengthH2 = $('#contentInner h2').length;
    
    if(lengthH2>0){
        
        $('<ul></ul>').appendTo('#indexMenu>ul>li');
        
        for(i=0;i<lengthH2;i++){
            
            var nodes = document.getElementsByTagName('*'), i = nodes.length;
            var el = document.querySelector('h2'), findTag = 'H1';
            while(i--) if(nodes[i] === el) break;
            while(i--) if(nodes[i].tagName === findTag) break;
            if(nodes[i]) var parentClass = nodes[i].className;
            
            //var parentClass = $('#contentInner h2').eq(i).parents().prev('h1, :has(h1):first').attr('class');
                
            if($('#contentInner h2:not(#pagetitle)').eq(i).text().length>50){
                
                var text = '<li class="h2-'+i+'"><a href="[[~[[*id]]]]#h2-'+i+'" title="'+$('#contentInner h2:not(#pagetitle)').eq(i).text().replace(/^\s*|\s+$/g, '').replace(/\t|\n/g, ' ')+'">'+$.trim($('#contentInner h2:not(#pagetitle)').eq(i).text().slice( 0, 50 )) + '…'+'</a></li>'
                
            }else{
                
                var text = '<li class="h2-'+i+'"><a href="[[~[[*id]]]]#h2-'+i+'">'+$('#contentInner h2:not(#pagetitle)').eq(i).text().replace(/^\s*|\s+$/g, '').replace(/\t|\n/g, ' ')+'</a></li>'
                
            }
            
            $('#contentInner h2').eq(i).addClass('h2-'+i) // .append('<a name="h2-'+i+'"></a>');
            
            $(text).appendTo('#indexMenu>ul>li.'+parentClass+'>ul');
            
        }
        
    }

Почему-то в if(nodes[i]) var parentClass = nodes[i].className; всего один раз получает класс.

Никогда не работал с Vanilla JS)