Как получить текст(заголовок) класса конкретного блока?

Question

[Айдар]

Здравствуйте! Как получить текст(заголовок) класса конкретного блока? Т.е. имеем два одинаковых блока, но с разными заголовками. И под ними кнопка которая при клике на которую,срабатывает скрипт.
Но суть в том что классы у заголовков одинаковые и скрипт берет первый блок и выводит заголовок. Можно ли как-то заставить скрипт работать только в том блоке,в котором была нажата кнопка?
P.S. Блоков будет много т.ч. указывать каждому классу уникальное имя не вариант.
Пример: https://jsfiddle.net/6s4bk5jq/1/

Помогите с вложенностью...там undefined отдает
https://jsfiddle.net/n20dwae2/1/

Comments

[OVK2015]

$(".extremum-click").click(function () {
document.querySelector('.input-xlarge').value = this.parentElement.innerText
});

Answer 1

[Айдар]

Lumore , devstudent , Михаил Шведков , qork нашел решение,но как применил у себя..так сразу ошибка undefined. Т.е. теперь как-то нужно добраться до значения Услуги.
P.S. на сайте другая разметка немного и поэтому тот вариант не подошел...типа не может добраться до текста.
Старая версия: https://jsfiddle.net/vdb67ses/ тут все работает,а в новой нет....хотя js такой же.

https://jsfiddle.net/n20dwae2/1/

Comments

[Михаил Шведков]

Вот ведь проблема) Так ты ж смотри, куда просишься. У тебя получается баттон<-див<-родительский див->селктор->ссылка->значение. Слишком топорно если решить проблему - кидать .parent().parent() и дальше играться. Есть шанс, что можно изящнее. Иначе при каждом изменении кода все будет очень плохо)

[Михаил Шведков]

$(this).closest(".product-shop").find('.product-name a').html(); - так работает. С плачем отправляюсь листать учебники по JS, ибо ваще хз, насколько это решение красиво)))

[Айдар]

Михаил Шведков: так-то это решение)))В https://jsfiddle.net/vb4b5uem/ действительно срабатывает,но на сайте нет. Я в печали)))

[Михаил Шведков]

Кинь линк, посмотрим, что на сайте творится

[Айдар]

Михаил Шведков: Все норм....чет я тупанул)))Вставил ваш код еще раз и заработало!!!!
Спасибо вам большое!

[Михаил Шведков]

Не с той стороны подходишь) Решение из туториала по бутстрапу... getbootstrap.com/javascript/#modals-related-target

[Айдар]

Михаил Шведков: За гайд спасибо! В следущий раз не буду велосипед изобретать.
Куда вам плюсик поставить?

[Михаил Шведков]

Тут принцип не такой, что "при нажатии на кнопку передать в модальное окно значение поля рядом с кнопкой", а наоборот - "при открытии модалки цепляем данные об объекте, который это открытие породил". В данном случае проще всего будет в кнопку закинуть атрибут типа data-name="Название услуги" и потом его дернуть в событии

[Михаил Шведков]

Aderus: та я не в курсе про плюсики... недавно тут) Помог человеку - уже доволен)

[Айдар]

Михаил Шведков: точно...data-name...и не нужно будет рыскать по класам,родителям,детям

[Айдар]

Сразу вспомнился пример от Lumore https://jsfiddle.net/6s4bk5jq/3/
Там тоже через data предлагали

Answer 2

[Lumore]

https://jsfiddle.net/6s4bk5jq/3/

Answer 3

[devstudent]

data-target="#myModal" должно совпадать с айди того, кого вы хотите вызвать этой кнопкой

Answer 4

[Михаил Шведков]

Можно. Передавай в событие click переменную, потом работай с ней. Что-то вроде

$(".extremum-click").click(function (e) {
    	e.preventDefault();
      document.querySelector('.input-xlarge').value =$(e.target).parent().find('.name').first().html();
      return false;
    });

Comments

[vadim_tur]

Почему бы просто не использовать $(this)?

[Михаил Шведков]

Первое, что пришло в голову) Согласен, ни разу не идеальное решение)

Answer 5

[display: block]

$(".extremum-click").click(function () {
   $("#prependedtext-2").val($(this).prev(".name").text());
});

Answer 6

[vadim_tur]

Я почти уверен, что кнопка и блок имеют один и тот же родительский элемент, если нет, то добавь. Используй .parent(), .closest(), .children(). и никакие классы не нужны.

То есть в обработчике клика пишешь: $(this).parent().children().eq(0). Поэкспериментируй.