За последние 24 часа нас посетили 17188 программистов и 1248 роботов. Сейчас ищут 943 программиста ...

Jquery правильный селектор

Тема в разделе "JavaScript и AJAX", создана пользователем IvanKut, 19 июн 2020.

  1. IvanKut

    IvanKut Активный пользователь

    С нами с:
    27 июл 2018
    Сообщения:
    264
    Симпатии:
    0
    Приветствую
    Использую bootstrap table и хочу рядом со стандартной кнопкой вставить свою кнопку, смотрю код и вижу, что ID элементов нет, классы используются общие и не могу понять, а как выбрать правильный селектор, чтобы вставить свою кнопку рядом с ней.
    Наверняка есть что-то, что помогает подсказать правильный селектор до данного элемента?
    Благодарю!

    [​IMG]
     
  2. Artur_hopf

    Artur_hopf Активный пользователь

    С нами с:
    7 май 2018
    Сообщения:
    2.264
    Симпатии:
    405
    Что угодно, можете title взять или полное совпадение, то есть перечислить все что есть у кнопки
    HTML:
    1. <button type="button" class="btn btn-primary">123</dutton>
    2. <button type="button" class="btn btn-secondary" title="Колонки" data-toggle="dropdown">123</dutton>
    3.  
    4. document.addEventListener('DOMContentLoaded', function() {
    5.     var button = document.querySelector('button.btn.btn-secondary[title="Колонки"][data-toggle="dropdown"]');
    6.  
    7.     let myButton = document.createElement('button');
    8.     myButton.innerHTML = 'Новая кнопка';
    9.     button.before(myButton);
    10. });
    а через пробел можно вообще указать блоки родителей.
    HTML:
    1. <div class="test a">
    2.     <button type="button" class="btn btn-secondary" title="Колонки" data-toggle="dropdown">123</dutton>
    3. </div>
    4. <div class="test b">
    5.     <button type="button" class="btn btn-secondary" title="Колонки" data-toggle="dropdown">123</dutton>
    6. </div>
    7. document.addEventListener('DOMContentLoaded', function() {
    8.     var button = document.querySelector('div.test.b button.btn.btn-secondary[title="Колонки"][data-toggle="dropdown"]');
    9.  
    10.     let myButton = document.createElement('button');
    11.     myButton.innerHTML = 'Новая кнопка';
    12.     button.before(myButton);
    13. });
     
    #2 Artur_hopf, 19 июн 2020
    Последнее редактирование: 19 июн 2020
  3. IvanKut

    IvanKut Активный пользователь

    С нами с:
    27 июл 2018
    Сообщения:
    264
    Симпатии:
    0
    @Artur_hopf простите, что не выложил код. Освоил http://jsfiddle.net/ буду в след топиках использовать

    Вы вот этот путь в ручную составляли, либо есть какое-то расширение которое может полный пусть сгенерировать?
    div.test.b button.btn.btn-secondary[title="Колонки"][data-toggle="dropdown"]
     
  4. Artur_hopf

    Artur_hopf Активный пользователь

    С нами с:
    7 май 2018
    Сообщения:
    2.264
    Симпатии:
    405
    Нет, в ручную, вы ищите сами, то куда нужно, смотрите теги и прописываете.
    --- Добавлено ---
    @IvanKut но если вам достаточно dom элементов и классов, то можно в хроме копировать Copy JS path. Но там будет что то такое:
    Код (Javascript):
    1. document.querySelector("body > div.test.b > button.btn.btn-secondary")
     
    #4 Artur_hopf, 19 июн 2020
    Последнее редактирование: 19 июн 2020
  5. IvanKut

    IvanKut Активный пользователь

    С нами с:
    27 июл 2018
    Сообщения:
    264
    Симпатии:
    0
    @Artur_hopf copy path очень удобно! Спасибо огромное!