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/

Jquery - 按类查找最接近的文本

1 个答案: