Добавить DIV в конец формы

Тема в разделе "JavaScript", создана пользователем Serafimer, 28 авг 2014.

Модераторы: ZiX
  1. Serafimer

    Serafimer Создатель

    Заблокирован
    Регистр.:
    24 апр 2014
    Сообщения:
    36
    Симпатии:
    17
    Доброго времени суток! Есть примерно след. конструкция
    HTML:
    <!DOCTYPE HTML>
    <html>
    <head>
        <title>Неназванный 1</title>
    </head>
    
    <body>
    
    <form class="form-horizontal">
    <fieldset>
    <div class="control-group">
        <span class="control-label">Metadata</span>
        <div class="controls form-inline">
            <label for="inputKey">Key</label>
            <input type="text" class="input-small" placeholder="Key" id="inputKey">
            <label for="inputValue">Value</label>
            <input type="password" class="input-small" placeholder="Value" id="inputValue">
        </div>
    </div>
    <button type="button" id="newform_add" class="btn btn-success btn-lg btn-block"><i class="icon-plus icon-white"></i>добавить</button>
    </fieldset>
    </form>
    <script type="text/javascript">
    <!--
    jQuery(document).ready(function($){
        $('#newform_add').click(function(){
           
        })
    })
    -->
    </script>
    </body>
    </html>
    Нужно по нажатию на кнопку newform_add вставлять после
    HTML:
    <div class="control-group">
        <span class="control-label">Metadata</span>
        <div class="controls form-inline">
            <label for="inputKey">Key</label>
            <input type="text" class="input-small" placeholder="Key" id="inputKey">
            <label for="inputValue">Value</label>
            <input type="password" class="input-small" placeholder="Value" id="inputValue">
        </div>
    </div>
    тот же самый код. То есть тупо добавлять поля.
    Думал сделать так
    HTML:
    $('').after(Data);
    но как выбрать необходимый мне селектор? То есть что записать в $('')
    Спасибо!
     
    Шумадан нравится это.
  2. Шумадан

    Шумадан Хабарра!!11

    Регистр.:
    6 фев 2008
    Сообщения:
    1.723
    Симпатии:
    2.098
    $('.control-group') - выбирает все элементы с классом control-group
    http://api.jquery.com/after/
     
    mff4 нравится это.
  3. Serafimer

    Serafimer Создатель

    Заблокирован
    Регистр.:
    24 апр 2014
    Сообщения:
    36
    Симпатии:
    17
    И что по-твоему в итоге должно произойти? У меня он в итоге добавляет после КАЖДОГО control-group ещё один. В итоге они растут в геометрической прогрессии.
    Кроме того - на странице может быть ещё где-то .control-group и что делать? Можно ли поместить необходимые .control-group в div с определённым ID и искать .control-group только внутри этого DIV'а?
     
    Шумадан нравится это.
  4. Шумадан

    Шумадан Хабарра!!11

    Регистр.:
    6 фев 2008
    Сообщения:
    1.723
    Симпатии:
    2.098
    где у тебя в примере указано, что будет их несколько? как насчёт $('.control-group:last')?
    ты можешь по любому критерию выбирать элемент(ы), класс, айди, значение любого аттирибута, может как раз настало время почитать документацию?
    http://api.jquery.com/category/selectors/
     
  5. Serafimer

    Serafimer Создатель

    Заблокирован
    Регистр.:
    24 апр 2014
    Сообщения:
    36
    Симпатии:
    17
    Я английский не знаю
     
    Шумадан нравится это.
  6. Шумадан

    Шумадан Хабарра!!11

    Регистр.:
    6 фев 2008
    Сообщения:
    1.723
    Симпатии:
    2.098
    Джуга и Serafimer нравится это.
  7. Serafimer

    Serafimer Создатель

    Заблокирован
    Регистр.:
    24 апр 2014
    Сообщения:
    36
    Симпатии:
    17
    Можно просто ответить какой селектор у последнего дива с определённым классом, находящимся внутри дива с определённым id? Кто не понял
    HTML:
    <!DOCTYPE HTML>
    <html>
    <div class="aaa"></div>
    <div id="asdasd">
        <div class="aaa"></div>
        <div class="aaa"></div><!--Выбрать этот-->
    </div>
    </html>
     
    Шумадан нравится это.
  8. Шумадан

    Шумадан Хабарра!!11

    Регистр.:
    6 фев 2008
    Сообщения:
    1.723
    Симпатии:
    2.098
    $('#asdasd .aaa:last') читать документацию немедленно!

    P.S.: иногда очень хорошо помагает понять такая штука
    CSS.png
     
    Джуга, user8730 и Serafimer нравится это.
  9. user8730

    user8730 Создатель

    Регистр.:
    16 авг 2014
    Сообщения:
    27
    Симпатии:
    7
    Ответ у Шумадан верный, но больше всего меня удивил его скриншот ))
    Я FireBug пользуюсь уже эдак лет 5, но ни разу не обращал внимания на "Copy CSS Path"))

    Спасибо чел!

    P.S. Кстати, все сталкивался вот с какой "фичей" и побороть не смог у FireBug.
    А вдруг ты вкурсе.
    Когда в FireBug при просмотре элемента, у которого помимо основных CSS свойств определены свойства для состояния :hover (например для тега <a>) - наводишь мышку - то в вкладке "Стиль" они соответственно отображаются. Когда же ты убираешь мышку с тега, разумеется CSS:hover убирается из вкладки "Стиль".
    Вопрос: есть ли возможность зафиксировать информацию в этой вкладке в состоянии, когда показано дерево свойств CSS:hover? (чтобы скопировать и т.д.)

    вот наглядный пример вопроса
    Snap1 = когда мышка наведена
    Snap2 = мышку отвел от объекта.
     

    Вложения:

    • Snap1.png
      Snap1.png
      Размер файла:
      76,4 КБ
      Просмотров:
      2
    • Snap2.png
      Snap2.png
      Размер файла:
      66 КБ
      Просмотров:
      3
    Последнее редактирование модератором: 29 авг 2014
    Шумадан нравится это.