JQuery - найдите ближайший текст по классу

Question

Вот мой HTML и скрипт. Я просто хочу найти текст щелчка и включить в это предупреждение текст предыдущего элемента с определенным классом. Элементы не обязательно являются детьми/родителями здесь.

Итак, если Prince5 нажата, предупреждение следует читать King1: Queen3: Prince5

я близко, но это в настоящее время всегда дает текст как Queen1, так как это первый текст в этой колонке.

Любые идеи?

<li class="king"><a href="#" >King1</a>    
<span class="column1">      
<li><a href= "#" class="queen">Queen1</a></li> 
<li><a href= "#"> Prince1</a></li> 
<li><a href= "#"> Prince2</a></li> 
<br> 
<li><a href= "#" class="queen">Queen2</a></li> 
<li><a href= "#"> Prince3</a></li> 
<li><a href= "#"> Prince4</a></li> 
<br> 
<li><a href= "#" class="queen">Queen3</a></li> 
<li><a href= "#"> Prince5</a></li> 
<li><a href= "#"> Prince6</a></li> 
</span> 


<script type="text/javascript"> 
$("li a").click(function() { 
    var three= $(this).text(), 
    one = $(this).closest('.king').find('a:first').text(); 
    two = $(this).closest(".column1").find("a.queen:first").text(); 
    alert(one + ":" + two + ":" + three); 
}); 
</script> 

Answer 1

Существует ряд проблем с показанным HTML. A span не является допустимым родителем для элементов LI, поэтому я добавил UL.

В принципе, вы можете вернуться на предков щелкнули ссылку, а затем вбок через предыдущие братья и сестры (что матч .queen), а затем снова по ссылке на первый матч:

$("li a").click(function() { 
    var three = $(this).text(), 
     one = $(this).closest('.king').find('a:first').text(); 
    two = $(this).closest("li").prevAll("li:has(a.queen)").first().find('a').text(); 
    alert(one + ":" + two + ":" + three); 
}); 

JSFiddle:http://jsfiddle.net/TrueBlueAussie/7q3e9p7g/1/