обернуть текст в список, сгенерированный из jquery

У меня есть список, который создается из базы данных с помощью jquery. Список - это текстовая строка, которая слишком велика для одной строки. Я wo <html> <head> <meta http-equiv = "X-UA-Compatible" content = "IE = edge" > <meta name = "viewport" content = "width = device-width, initial-scale = 1.0 " > <сценарий SRC = " ../jquery-3.1.0.min.js " > </ скрипт> <ссылка отн = "таблица стилей" HREF = " https://stackpath.bootstrapcdn.com/bootstrap/4.1.1 /css/bootstrap.min.css " целостность = "sha384-WskhaSGFgHYWDcbwN70 / dfYBj47jz9qbsMId / iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin = "anonymous" > <link rel = "stylesheet" href = "month.css" > <? php $ ref = 1 ; // $ _ GET [ 'recIndex']; ?> <script> var monthNumber = "<? php echo $ ref;?>" ; function getData () { $ . ajax ({ url : "getData.php? monthNumber =" + monthNumber , type : "GET" , dataType : "json" , success : function ( data ) { var jobs = data [ 1 ]. jobs ; var jobTitle = jobs . split ( ',' ); i = jobTitle . length ; for ( a = 0 ; a < i ; a ++) { var x = jobTitle [ a ]. split ( ';' ); $ ( '#jobs' ); . добавить ( '<параметр>' + х [ 0 ] + '</ опции>' ); $ ( '#jobslinks' .) добавление ( '<параметр>' + х [ 1 ] + </ опции> ' ) ; } } }); } $ ( документ ). ready ( function () { getData (); if ( monthNumber == 1 ) { $ ( 'h1' ). text ( 'January' ); } }) </ script> <body> <div class = 'grid-container ' > <div class = "row" > <div class = "mx-auto" > <span> <h1> </ h1> </ span> </ div> </ div> <div class = "row" > <div class = "col-lg-12 col-md-12 col-sm-12 col-xs-12" > <div id = 'jobsTitle' > <span> Задания </ span> </ div> <div> <ul id = 'jobs' class = 'list' > </ ul> </ div> <div> <ul id = 'jobslinks' class = 'list' > </ ul> </ div> </ div> < / div> </ body> </ html> d хотел бы обернуть текст, чтобы он содержал его в div. Я попробовал word-wrap: break-word и изменение ширины css на li и div, но ничего не работает. Я предполагаю, что это может быть потому, что этот текст создается после создания DOM с помощью сценария jquery.

вот сценарий HTML

body{
        background-color: #D2F9C6;
}
#jobsTitle{
        text-align:center;
        background-color: #7FDE61;
}
.list{
        background-color:white;
        width:50%;
        float:left;
        border: solid;
        border-color: 87C163;
        margin: 0;
        padding: 0;
}
#job{
        width:50%;
        word-wrap: break-word;
}
#jobslinks{
        width:50%;
        word-wrap: break-word;
}

Вот css

<option>

это снимок экрана о том, что происходит

введите описание изображения здесь

jquery,css,

0

Ответов: 1

1 принят

Это происходит потому, что вы добавляете selectэлемент, и они должны быть в стиле.

Следует отметить , что варианты для optgroup, datalistи ul элементы ..

Поскольку вы вложите их в a ul, я бы предложил вам изменить javascript на

$('#jobs').append('<li>'+x[0]+'</li>');
$('#jobslinks').append('<li>'+x[1]+'</li>');

Затем он будет правильно форматировать содержимое.

Связанный вопрос и ответ

JQuery, CSS,
Похожие вопросы
Яндекс.Метрика