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