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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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