1

Имеем:

<html>
    <body>
        <div>
            <form>
                <ul>
                    <li>
                        <label>Simple text 1</label>
                        <input type="text" name="inp1" value="Text 1">
                    </li>
                    <li>
                        <label>Simple text 2</label>
                        <input type="text" name="inp2" value="Text 2">
                    </li>
                    <li>
                        <label>Simple text 3</label>
                        <input type="text" name="inp3" value="Text 3">
                    </li>
                <ul>
                <input class="getInfoButton" type="button" value="Get Value">
            </form>
        </div>
    </body>
</html>

Соль: Нужно получить значение, третьего <input>, имея на руках такой селектор $(".getInfoButton")

Нужно решить эту задачу оптимально, тобишь если я потом захочу в DOM дереве переместить третий <input> на несколько <li> ниже (добавив между третьим и вторым <li> еще пункты)

P.S Если такое решить невозможно, тогда как я понимаю нужно писать свою функцию

6
  • Что-то типа такого может быть? $('.getInfoButton').prev().children('input[type=text]').eq(3);
    – cyadvert
    14 дек 2015 в 18:47
  • "... если я потом захочу в DOM дереве переместить третий <input>..." - нужно всегда обращаться к третьему по счету или к этому конкретно, независимо, каким он будет по счету в будущем?
    – lexxl
    14 дек 2015 в 18:58
  • @lexxl А этого мы не знаем) он может быть 7-ым а может быть и 27-ым
    – MaximPro
    14 дек 2015 в 19:04
  • @MaximPro, Обращение к определенному элементу, а как определять какой элемент нужен так и не написали, то третий, то седьмой
    – Grundy
    14 дек 2015 в 19:09
  • @MaximPro я спрашиваю, что надо найти - третий элемент в будущем, или тот, что третий сейчас =) от этого зависит, к чему привязываться - к порядковому номеру или имени/классу/айди
    – lexxl
    14 дек 2015 в 19:10

3 ответа 3

3

Выбирайте по идентификатору: $('#id3') (но нужно будет добавить этот идентификатор соответствующему <input id="id3">), или же просто выбирайте по имени $('[name="inp3"]').

Ну или в вашей задаче:

$('.getInfoButton').prev().find('[name="inp3"]')

Только я не понимаю зачем отталкиваться именно от этого селектора, но дело ваше.

9
  • Почему от этого селектора? Потому что от него будет произведен щелчек мыши =)
    – MaximPro
    14 дек 2015 в 18:59
  • 3
    @MaximPro, все равно не понимаю, клик можно по этому элементу сделать, а данные получить с любых других.
    – Octoloper
    14 дек 2015 в 19:00
  • Хмм а действительно, что-то я совсем дичь задаю
    – MaximPro
    14 дек 2015 в 19:03
  • @MaximPro, кое что поменял в коде, такой точно должен работать.
    – Octoloper
    14 дек 2015 в 19:03
  • Про find не слышал))) Я видимо это и искал) И насчет children(), в моем коде мы не можем написать так $('.getInfoButton').prev().children('input[name=inp3]') т.к это работает для одной вложености, а не для нескольких, верно?!
    – MaximPro
    14 дек 2015 в 19:08
3

Вот, что Вам поможет:

$('.getInfoButton').prev().find('input[type=text]').eq(2);

Подробнее:

$('.getInfoButton') - Сам элемент
.prev() -> шаг наверх по DOM
.find('input[type=text]') -> отбираем в нем input[text]
.eq(2) -> берем 3-й элемент

7
  • Хороший ответ, для новичков с описанием методов
    – MaximPro
    14 дек 2015 в 19:14
  • @MaximPro, на самом деле не очень. если несколько элементов с классом .getInfoButton на странице
    – Grundy
    14 дек 2015 в 19:15
  • @Grundy для этого можно использовать $(this)
    – MaximPro
    14 дек 2015 в 19:24
  • 2
    @MaximPro, откуда будет брать $(this) если в данном контексте нигде не указано про обработчик события, в принципе это указано только в ответе @mix
    – Grundy
    14 дек 2015 в 19:25
  • @Grundy Так я сделаю этот обработчик событий =)
    – MaximPro
    14 дек 2015 в 19:29
1
$(".getInfoButton").click(function(){
    var selector = $('input[type="text"]')[2];
    console.log($(this).parent().parent().find(selector).val());
});

Вот решение задачи по вашим требованиям, но это называется никак иначе, как "говнокод". Задайте лучше тегам классы или идентификаторы и выбирайте основываясь на них.

17
  • что-то перемудрили: нашли конкретный элемент, selector - почему сразу у него value не взять? да и два parent - не нужно, первый будет указывать на форму и этого достаточно
    – Grundy
    14 дек 2015 в 19:06
  • @Grundy так будет яснее для автора.
    – mix
    14 дек 2015 в 19:08
  • думаешь? мне кажется это еще больше запутает :)
    – Grundy
    14 дек 2015 в 19:08
  • Хотел написать как у вас код с подписью такое не надо
    – MaximPro
    14 дек 2015 в 19:11
  • 2
    $(this).parent().find('input:eq(3)') вот так находится
    – Grundy
    14 дек 2015 в 19:14

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.