Как получить текст из определенного ближайшего элемента?

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») и получить только текст() пролета <> рядом с ним (имя из город), работает отлично, если в html есть только один город, но пока я продолжаю добавлять их, результат становится беспорядочным, и я получаю строку, содержащую все названия городов, и мне нужен только один.

Я знаю, что очевидная вещь будет давать им разные идентификаторы для каждого, но это будет даже более беспорядочно, потому что этот html динамически генерируется в зависимости от предыдущего события, вызванного пользователем, города происходят из массив, и мне нужно, чтобы индивидуальное название города удалялось из него, если щелкнуть «x», надеюсь, что я достаточно хорошо объяснил.

jsfiddle here!!, чтобы вы могли лучше видеть то, что я имею в виду

Answer 1

С разметке, проще всего это использование .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>

Answer 2

вы можете использовать prev(), чтобы получить предыдущий срок.

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

скрипку here