Для цикла в jQuery. Как это сделать?

ProgramBox

Для цикла в jQuery. Как это сделать?

Post author:admin
Запись опубликована:27 апреля, 2023
Post category:Вопросы по программированию

#jquery

Вопрос:

Как я могу заменить этот цикл for-each на jQuery?

 $(document).ready(function(){
    hidebutton = $("#hideall");
    hidebutton.click(function(){
        for(i=1;i<=6;i  ){
                var countrylist = document.getElementById("Country-" i);
                countrylist.style.display = "none";
            }
    });
});

HTML-это

 <input id="hideall" type="button" value='Hide Countries' /><br /><br />
<div id="Country-1">USA</div>
<div id="Country-2">UK</div>
<div id="Country-3">UAE</div>
<div id="Country-4">China</div>
<div id="Country-5">India</div>
<div id="Country-6">Japan</div>

Ответ №1:

Для ваших нужд есть селектор CSS3

Как вы, возможно, знаете, jQuery поддерживает селекторы CSS3 независимо от того, есть это в браузере или нет. Следовательно, вы можете использовать более продвинутый селектор, который будет выбирать все элементы с идентификатором, начинающимся с Country :

 $('div[id^="Country"]').hide();

Ответ №2:

попробуйте:

 hidebutton.click(function(){
    $('[id^="Country-"]').hide();
});

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

Ответ №3:

Вы можете добавить класс к каждому из элементов (например, class="Country" ), затем написать

 $('.Country').hide();

1. Да, добавление имени класса — самый простой способ сделать это. но если это не решение, то как это сделать?. Возможно, это и не требуется, но мне очень хотелось бы узнать о преобразовании цикла for в jquery, поскольку я новичок 🙂

2.@user: Вы можете использовать селектор атрибутов: $('div[id^="Country"]') api.jquery.com/attribute-starts-with-selector

Ответ №4:

Отредактировал ваш jsfiddle, добавил пример jQuery foreach в комментарии. Однако здесь вам не нужен foreach, потому что jQuery может работать с коллекцией. Я также изменил ваш HTML, вам нужно лучше сгруппировать эти разделы:

 <div id="Countries">
    <div id="Country-1">USA</div>
    <div id="Country-2">UK</div>
    <div id="Country-3">UAE</div>
    <div id="Country-4">China</div>
    <div id="Country-5">India</div>
    <div id="Country-6">Japan</div>
</div>

$(document).ready(function(){
    hidebutton = $("#hideall");
    hidebutton.click(function(){
        $('#Countries div').hide();
        // $('#Countries div').each(function(index, divElement) { ... });
    });
});

http://jsfiddle.net/nLfNj/3/

1. Вы должны опубликовать свое решение здесь вместо описания кода, который вы добавили на другой сайт.

2. jsfiddle является общим для SO и общедоступным, поэтому любой может увидеть решение. Вопрос включал jsfiddle, поэтому я подумал, что уместно, чтобы ответ также был. Более того, я предпочитаю скрипту коду, который я не могу выполнить. Читатели могут просто подключиться и попробовать это. Есть ли какая-то особая причина, по которой вы не могли бы нажать на дополнительную ссылку, чтобы увидеть решение?

3. Основная причина в том, что StackOverflow предназначен для автономного хранилища вопросов и ответов и не должен полагаться на время безотказной работы или общую доступность другого сайта. Это просто то, как работает StackOverflow. jsFiddle чрезвычайно полезен, и ссылка на него — отличная идея. Но были случаи, когда jsFiddle не работал, и предоставленные ответы оказывались бесполезными. Пожалуйста, помогите сохранить целостность этого сайта, сначала ответив здесь, а затем, при желании, дополнив свой ответ внешними ссылками. Спасибо.

Ответ №5:

дайте каждой стране класс (т.Е. «country»), затем выполните $('.country').hide()

1. Да, добавление имени класса — самый простой способ сделать это. но если это не решение, то как это сделать?. Возможно, это и не требуется, но мне очень хотелось бы узнать о преобразовании цикла for в jquery, поскольку я новичок 🙂