如何从特定的最近元素获取文本？

Question

我一直在学习自己编写代码并使用 jquery 库做一些有趣的事情，但我被困在这里。这是我得到的：

<span class='ccy'>San Diego</span><span class='dc'> X</span>
<span class='ccy'>San francisco</span><span class='dc'> X</span>
<span class='ccy'>Palo alto</span><span class='dc'> X</span>

我希望能够单击 $("span.dc") 并仅获取其旁边的 text()（城市名称），如果有html 中只有一个城市，但只要我不断将它们相加，结果就会变得混乱，最后我得到一个包含所有城市名称的字符串，而我只需要一个。

我知道显而易见的事情是给他们每个人一个不同的 id 但它会变得更加混乱，因为 html 是根据用户之前触发的事件动态生成的，这些城市来自一个数组，如果单击 'x'，我需要从中删除城市的单独名称，我希望我已经解释得足够好。

jsfiddle here!! 这样你就能看得更清楚

Answer 1

您可以使用 prev() 获取之前的跨度。

$("span.dc").click(function() {     
   var jj = $(this).prev('span.ccy').text();
});

fiddle here

Answer 2

对于您的标记，最简单的是使用 .prev

$(function() {
  $(".dc").on("click",function() {
    var city = $(this).prev().text(); 
    console.log(city);
    $("#msg").html("You clicked "+city);
  });
});

.dc { padding-right:3px;border-right:1px solid black }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<span class='ccy'>San Diego</span><span class='dc'> X</span>
<span class='ccy'>San Francisco</span><span class='dc'> X</span>
<span class='ccy'>Palo Alto</span><span class='dc'> X</span>
<br/><span id="msg"></span>

如何从特定的最近元素获取文本？

How to get the text from a specific closest element?

jquery

html

closest