Member 14978380 Ответов: 1

Как преобразовать элементы массива в формат списка с помощью jquery?

Я хочу, чтобы мой вывод приходил в формате списка, но он приходит в одну строку.

Выход:
один-два

Ожидаемый Выход:
один
два

Что я уже пробовал:

 <script type="text/javascript">
        
  $(document).ready(function(){
  var arr = [];
 
  $("#txtResult").on("click", function(){
       text="";
        if (jQuery("#txtFirstNo").val().match(/^\d{5}$/, '')  )  {
                arr.push("one") ;
            }
        if ( jQuery("#txtFirstNo").val().match(/^\d{5}$/, '') )
            {
                arr.push("two")+"<br>";
            }
        if ( jQuery("#txtFirstNo").val().match(/^\d{7}$/, '') )
            {
                arr.push("three")+"<br>";
            }
        
        jQuery("p").text(arr) ;
        arr=[];
                
  });
});
    </script>
    
</head>
<body>


    <input type="text" id="txtFirstNo" name="txtFirstNo" placeholder="Enter value"  />
    <br><br>
    <input type="submit" id="txtResult"/><br
    <p id="txtPrint" ></p>
 
</body>
</html>

1 Ответов

Рейтинг:
1

Richard Deeming

Измените свой сценарий на:

$(function(){
    $("#txtResult").click(function(){
        var firstNo = $("#txtFirstNo").val(); // Cache this value, since you're using it multiple times
        var arr = [];
        
        if (firstNo.match(/^\d{5}$/)) {
            arr.push("one");
            arr.push("two"); // No need for a separate "if" branch with the same condition
        }
        else if (firstNo.match(/^\d{7}$/)) { // Use "else if", since the value can't match both patterns
            arr.push("three");
        }
        
        $("#txtPrint").text(arr.join("\n"));
    });
});
Установите стиль на выходном элементе таким образом, чтобы разрывы строк сохранялись. 
<p id="txtPrint" style="white-space:pre-line;"></p>
Демонстрация[^]

Member 14978380

Нет, у меня есть еще несколько шаблонов регулярных выражений, которые должны использоваться в условиях if, поэтому я хочу, чтобы если оба условия становятся истинными, то значение должно приходить в формате списка.

Member 14978380

Могу ли я получить вывод в формате списка, не меняя формат if ?

Richard Deeming

Получение вывода для отображения на нескольких строках включает в себя две вещи:
* С помощью arr.join("\n") чтобы соединить значения массива с символом новой строки;
* Установка style="white-space:pre-line;" на выходном элементе так, чтобы новые строки сохранялись.

Member 14978380

Но он не приходит в формате списка. Так есть ли другой вариант ?
И я использовал arr.join("\n") , но это не влияет на вывод.

Richard Deeming

Посмотрите еще раз на мою демонстрацию. Если это не тот формат вывода, который вам нужен, то вам нужно объяснить, что вы подразумеваете под "форматом списка".

Member 14978380

Я хочу получить результат в
один
два

скорее, чем
один-два

Richard Deeming

Еще раз: Посмотрите на мою демонстрацию.

То есть точно как отображается результат.

В чем же проблема?

Member 14978380

Что делать, если я использую два условия if ? Потому что в коде я пропустил шаблон регулярных выражений

Richard Deeming

Это не имеет значения. Если вы добавили несколько строк в массив, соедините его с новой строкой и установите white-space на выходном элементе вы получите каждый элемент в новой строке.

Member 14978380

Я новичок в jQuery. Так что, пожалуйста, не могли бы вы дать мне exmaple ?

Richard Deeming

Я уже привел вам пример и объяснил его.
Демонстрация[^]

Member 14978380

У меня есть такие условия, так как же я могу использовать ваш метод : >

если ( библиотека jQuery("#txtFirstNo").функция val().матч(/^\Д{10}$/, ") || библиотека jQuery("#txtFirstNo").функция val().матч(/^[JJD01|JJD00|JVGL]+и\D{7}$/, "))
{
ОБР.толчок("один");
}
если ( библиотека jQuery("#txtFirstNo").функция val().матч(/^\д{10,39}$/, ") || библиотека jQuery("#txtFirstNo").функция val().матч(/^[ГМ|ЛК|приемник]+[0-9]{10,39}$/, ") )
{
ОБР.толчок("два");
}

Richard Deeming

Неужели? 🤦‍♂️

$(function(){
    $("#txtResult").click(function(){
        var arr = [];
        
        if ( jQuery("#txtFirstNo").val().match(/^\d{10}$/, '') || jQuery("#txtFirstNo").val().match(/^[JJD01|JJD00|JVGL]+\d{7}$/, '')) {
            arr.push("one");
        }
        if ( jQuery("#txtFirstNo").val().match(/^\d{10,39}$/, '') || jQuery("#txtFirstNo").val().match(/^[GM|LX|RX]+[0-9]{10,39}$/, '') ) {
            arr.push("two");
        }
        
        $("#txtPrint").text(arr.join("\n"));
    });
});
Обновленная Демо-Версия[^]

Member 14978380

Большое вам спасибо за вашу помощь...
:)