Измените HTML-код после загрузки страницы (с помощью jQuery ?)

#html #jquery #css #twitter-bootstrap #replace

Вопрос:

Я пытаюсь найти способ изменить HTML код, чтобы заменить каждое имя класса начальной загрузки col (col, col-xs-x, col-x и т. Д.) col-12 После загрузки страницы.

Я мог бы сделать это с .removeClass('name') помощью и затем .addClass('name') , но мне нужно использовать некоторые регулярные выражения, потому что я хочу изменить col имена классов начальной загрузки.

От чего-то вроде этого :

 <body>
    <div class="col-xs-6 col-sm-4 col-2"> Content 1 </div>
    <div class="col"> Content 2 </div>
</body>

Я хочу изменить что-то вроде этого :

 <body>
    <div class="col-12"> Content 1 </div> <!--can even be class="col-12 col-12 col-12"-->
    <div class="col-12"> Content 2 </div>
</body>

Я нашел здесь кого-то, кто сделал это с помощью html().замените в jQuery, поэтому я попытался сделать то же самое, но это не работает.

Вот так:

 $(document).ready(function () { // my RegEx works well, verified it on regex101
    let col_let_num = $('body').html().replace(/bcolb(-[a-z]{0,2})?(-)?([0-9]{0,2})?/i, 'col-12')
    $('body').html(col_let_num)
})

Итак, мой вопрос в том, есть ли у вас какое-либо решение для изменения содержимого HTML после загрузки страницы ?

1. Я думаю, что вы неправильно используете bootstrap, если вы правильно используете классы точек останова начальной загрузки, вам не нужно будет их удалять.

2. Добавление тега начальной загрузки, чтобы эксперты по начальной загрузке могли подключиться. Я предлагаю объяснить, в чем проблема и чего вы пытаетесь достичь, вместо того, чтобы спрашивать, как массово обновлять HTML

3. Также $('body').html() это ужасная вещь, которую нужно сделать…

4. Да, но я не могу найти способ изменить имя этого класса с помощью регулярного выражения. Дело в том, что если люди поставят галочку, я хочу, чтобы все столбцы были col-12. Это ясно?

5. Имеет смысл, я предлагаю добавить этот вариант использования в вопрос, у кого-то может быть умный ответ с использованием классов утилит начальной загрузки

Ответ №1:

Вы забыли добавить ‘)’ в свой Javascript. но я действительно не могу понять, что вы пытаетесь здесь сделать. любым способом

 $(document).ready(function () { // my RegEx works well, verified it on regex101
    let col_let_num = $('body').html().replace(/bcolb(-[a-z]{0,2})?(-)?([0-9]{0,2})?/i, 'col-12')
    $('body').html(col_let_num)
})

Отредактированный
вот, пожалуйста

 $('[class*="col"]').each((i, e) => {
    let classes = $(e).attr('class').split(/s /);

    classes.forEach(v => {
        let col_let_num = v.replace(/bcolb(-[a-z]{0,2})?(-)?([0-9]{0,2})?/i, 'col-12')
        $(e).attr('class', col_let_num)
    })
})

это должно сработать.

1. Спасибо, я добавил это. Мне нужен способ заменить каждое имя класса col начальной загрузки на col-12.

2. @Kiji_T отредактировал ответ, указав правильный способ сделать это. 🙂

3. Кажется, это работает, но у меня есть сомнения, я думаю, что он удалил меня каким-то <div>. Возможно ли это ? (Я смотрю на это)

4. @Kiji_T Хм, нет. попробуйте вывести divs, чтобы увидеть, есть ли какие-либо изменения до кода console.log($('div').length) и после.

5. Не бери в голову, ты просто бог. Спасибо за это. Интересно, почему вы добавляете i, e и v в свою функцию. Не могли бы вы сказать мне, почему бы не использовать $(это), например ?