Jquery

Question

这是我的 HTML 和脚本。我只是想找到被点击的文本，并在警报中包含它的前一个元素的文本和某个 class。这里的元素不一定是children/parents

因此，如果单击 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。

基本上你可以回到被点击的 link 的祖先，然后通过前面的兄弟姐妹（匹配 .queen），然后再次向下到第一个匹配的 link：

$("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 - 通过 class 查找最接近的文本

Jquery - find closest text by class

javascript

text

find

closest