Как получить prev() НЕ просто родного брата
У меня 5 кнопок и только 4 кнопки рядом друг с другом. Есть одна кнопка, которая находится в своем собственном div. Как я могу получить к нему доступ с помощью чего-то вроде prev()?
Вот пример кода:
<div>
<div>
<input type = "button" class = "test" value = "Test1">
</div>
<input type = "button" class = "test" value = "Test 2">
<input type = "button" class = "test" value = "Test 3">
<input type = "button" class = "test" value = "Test 4">
<input type = "button" class = "test" value = "Test 5">
</div>
<script>
$(".test").click(function() {
var value = $(this).prev().val();
alert(value);
});
</script>
Связь:https://jsfiddle.net/fzwqmyb4/3/
Когда я нажимаю «Тест 4», он показывает «Тест 3», что хорошо. Но когда я нажимаю кнопку «Тест 2», он должен показывать «Тест 1», но этого не происходит. Причина в том, что prev() работает только для братьев и сестер.
Но как я могу сделать динамический код, который обнаруживает предыдущее что-то, даже если оно находится в другом div?
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
1
52
3
Перейти к ответу
Данный вопрос помечен как решенный
Ответы 3
Ответ принят как подходящий
Вы можете проверить, является ли предыдущий элемент входным или нет, если нет, найти дочерний элемент. Проверьте этот код:
$(".test").click(function(){
var prevElement = $(this).prev().get(0);
if (prevElement && prevElement.nodeName !== 'INPUT')
{
prevElement = $(prevElement).find('input').get(0);
}
var value = prevElement ? prevElement.value : '';
alert(value);
});
prev() находит только предыдущего брата. Чтобы найти вложенный элемент, вам нужно добавить еще немного логики в вашу функцию:
$(".test").click(function() {
var value;
var prevTagName = $(this).prev().prop("tagName");
switch(prevTagName)
{
case undefined:
value = "no previous siblings";
break;
case "INPUT":
value = $(this).prev().val();
break;
case "DIV":
value = $(this).closest("div").find("input").val();
break;
default:
value = "undefined";
break;
}
alert(value);
});<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<div>
<input type = "button" class = "test" value = "Test1">
</div>
<input type = "button" class = "test" value = "Test 2">
<input type = "button" class = "test" value = "Test 3">
<input type = "button" class = "test" value = "Test 4">
<input type = "button" class = "test" value = "Test 5">
</div>- Используя индекс, получите индекс текущего выбранного элемента с помощью теста класса, затем вычтите 1, чтобы получить предыдущий элемент с тем же классом.
$("input.test").click(function() {
var index = $(this).index()
var prevval = $("input.test").eq(index - 1).val()
console.info(prevval)
});<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<div>
<input type = "button" class = "test" value = "Test1">
</div>
<input type = "button" class = "test" value = "Test 2">
<input type = "button" class = "test" value = "Test 3">
<input type = "button" class = "test" value = "Test 4">
<input type = "button" class = "test" value = "Test 5">
</div>Другие вопросы по теме
Как вы используете mouseleave в CSS?
События по щелчку не работают на iPad, но работают на настольных и мобильных устройствах
Преобразование строки JSON в объект JSON (не объект сценария java)
Мне нужна таблица из базы данных для обновления в реальном времени
Как проверить, находится ли отключенная дата в выбранном диапазоне
Объединить столбцы с последним значением в группе
Отправить форму с первой кнопкой, которая включена в форме с несколькими кнопками
Не удалось загрузить частичное представление с помощью вызова JQuery ActionResult в ASP.NET Core
Как проверить, что массив содержит любой элемент другого массива
Как сделать так, чтобы фон прелоадера соответствовал всей странице с текущим gif?
Похожие вопросы
Угадыватель чисел Javascript ведет себя странно со значениями «0»
Как распечатать массив, переданный из javascript в php, из $_POST
Как обойти бессмысленную проверку array.filter
Как прокручивать две строки одновременно?
Как превратить «случай 3» в своего рода «случайный случай»
События по щелчку не работают на iPad, но работают на настольных и мобильных устройствах
Добавление анимации в выпадающее меню
Не могу получить правильный формат JSON, вместо этого я ошибаюсь
JavaScript: ловите ошибки в асинхронной функции и останавливайте остальную часть функции, если они есть
Как ввести сумму в долларах с помощью puppeteer?
Как насчет того, чтобы использовать свойство html 'id'?