JQuery получает контент диапазона

Я пытаюсь получить содержимое диапазона при нажатии кнопки. Это html:

<div class="multiple-result">
<button class="select-location" id="168">Select</button>
<span>Athens, Greece</span>
</div>

<div class="multiple-result">
<button class="select-location" id="102">Select</button>
<span>Athens, Georgia, USA</span>
</div>

Я пытаюсь получить его так, чтобы при нажатии кнопки он получил значение span. Это то, что я использую:

$('button.select-location').live('click', function(event){

  // set the span value
  var span_val = $(this).parent("span").html();

  alert('selecting...' + span_val);

});

Но предупреждение всегда отображается: select... null

Ответ 1

Сначала вы хотите получить родителя, затем найдите диапазон:

var span_val = $(this).parent().find("> span").html();

Изменить: Снова вернитесь и посмотрите на код, который вы написали 2 года назад, и застонал: "Почему я сделай это?". Вышеприведенный код неудобен. Вместо .find("> span") я должен был использовать .children("span").

var span_val = $(this).parent().children("span").html();

Но что такое ребенок вашего родителя? Брат! Итак, вместо .parent().children("span") я должен был использовать .siblings("span").

var span_val = $(this).siblings("span").html();

Но, глядя на HTML, нам даже не нужно выкапывать братьев и сестер, мы знаем, что это следующий брат:

var span_val = $(this).next("span").html();

или просто:

var span_val = $(this).next().html();

К этому моменту мы почти не используем jQuery. Мы могли бы просто сказать:

var span_val = this.nextSibling.innerHTML;

Но, может, теперь я слишком сильно повернул маятник?

Ответ 2

Это не кнопка parent. div является родителем button, а span является дочерним элементом div. Попробуйте

var span_val = $(this).parent().children("span").html();

вместо.

Рабочая демонстрация

Ответ 3

$('button.select-location').live('click', function(event){

  var span_val = $(this).next("span").html();

  alert('selecting...' + span_val);

});

Ответ 4

Пролет не является родительским элементом кнопки ".select-location", но div (который находится в промежутке). Используя вашу разметку, попробуйте что-то вроде этого:

var spanVal = $(this).parent('.multiple-result').find('span').html();

Ответ 5

Вот демон Jsfiddler, используя jQuery next

http://jsfiddle.net/vVK54/1/

$('button.select-location').live('click', function(event){      
  // set the span value
  var span_val = $(this).next().html();
  alert('selecting...' + span_val);
});

Ответ 6

В зависимости от того, сколько интервалов у вас есть, но если диапазон всегда будет сразу после кнопки, тогда будет работать .next('span'). Если вы планируете размещать кнопку в другом месте внутри одного и того же родительского div, вам нужно будет перемещаться по dom, чтобы найти его.

$('selector').click(function() {
    $(this).parent().find('span');
)};

Также лучше всего добавить целевой класс или атрибут в span, чтобы лучше его настроить, если вы планируете более сложное dom или несколько интервалов.

<span class='clicktarget'>Text Here</span>

$('button.select-location').click(function() {
    var span_val = $(this).parent('div').find('span.clicktarget').html();
});

Надеюсь, что это поможет