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. 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/