Проверка стиля JQuery

Question

Когда у меня есть это, div, в котором есть только текст, использует всю горизонтальную ширину, какую только может, поэтому после текста есть конечная ширина, которую я могу определить по цвету фона.

    errorElement: "div",
    errorPlacement: function(error, element) {

            error.insertBefore("#zzz");

Когда я использую это, ширина соответствует тексту, но я не могу получить каждую отдельную ошибку (span) в отдельной строке с помощью display: block.

    errorElement: "span",
    errorPlacement: function(error, element) {

            error.insertBefore("#zzz");
            error.css("display", "block");

Есть ли другой способ вызвать разрыв элемента span?

Answer 1

Yo может иметь span с другим цветом фона внутри div для отображения блока.

Также <li>

Answer 2

Извините, меня смутило то, что вы искали, но мой комментарий выше стоит. Почему бы не использовать html-элементы для принудительного переноса строки, а не пытаться вставить ее в css? Если вы хотите, чтобы каждый интервал ошибок находился в отдельной строке, поместите его в <p> или добавьте <br/>.

Как-то так должно работать:

errorElement: "span",
errorPlacement: function(error, element) {
        error.wrap('<p>');
        // alternative:  error.append('<br/>');
        error.insertBefore("#zzz");

Элемент li вместо span также будет хорошим выбором семантически, как предполагает @Victor. (В конце концов, это список ошибок.) Вам также потребуется <ul>, включающий раздел ошибок.

Answer 3

Это сработало для меня. Это не совсем лучший способ, но если у кого-то есть что-нибудь более удобное в обслуживании, пожалуйста, дайте мне знать. Я немного раздражен дисплеем: блок не работает для промежутка. Ну хорошо.

 errorElement: "div",
 errorPlacement: function(error, element) {

     error.insertBefore("#zzz");      

     if (error.text() == 'Password Required')
     {
          error.css("width", "135px");
     }
     else
     {
          error.css("width", "165px");
     }