Можно ли сократить этот двухстрочный jquery до 1 строки?

ProgramBox

Можно ли сократить этот двухстрочный jquery до 1 строки?

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

#javascript #jquery

Вопрос:

У меня есть эти divs, каждый из которых имеет один и тот же класс .onediv и разные идентификаторы div1, div2, div3

 <div class="alldivs">
   <div class="onediv" id="div1">
   </div>
   <div class="onediv" id="div2">
   </div>
   <div class="onediv" id="div3">
   </div>
</div>

Я хочу использовать jquery для изменения их css display свойства так, чтобы все они были, display none кроме id=div2 того display block , которое есть. Прямо сейчас я делаю это таким образом, используя 2 строки. Есть ли более быстрый способ сделать то же самое только с одной строкой?

 $('.onediv').css('display', 'none');    
$('#div2').css('display', 'block');

Ответ №1:

Если вы скрываете / показываете среди братьев и сестер, то наиболее общим (и все еще производительным) решением является использование .siblings() , например:

 $("#div2").show().siblings().hide();

Обратите внимание, что .show() и .hide() являются ярлыками для настройки display свойства CSS так, как вы хотите здесь (между none и тем, что было раньше, block в случае по умолчанию <div> ).

1. поскольку #div2 уже находится в состоянии «show», нет смысла использовать .show() . Кроме того, использование чего-то общего, такого как .siblings(), может быть опасным, поскольку при этом специально не выбирается класс .onediv. Если бы он добавил туда другие вещи, которые . класс alldivs не должен быть скрыт, этот код нарушил бы это

2. @Crayon — #div2 не находится в состоянии отображения, это то, что показывает код, я думаю, вам следует внимательно перечитать вопрос. В вопросе говорится, что таким должен быть результат , а не то, какова ситуация в данный момент. Если вы подумаете о том, где это можно было бы использовать, довольно очевидно, что это за операция, показывающая по одному разделу за раз.

3. @Crayon — Тоже просто примечание, вы можете сделать .siblings(".onediv") , если вам нужна проверка там, но подход тот же. Обратите внимание на название класса .onediv , как в show one at a time 🙂

4. @Crayon — При всем уважении, вы делаете некоторые очень необоснованные предположения, которые здесь не подтверждены… Я думаю, как только OP прояснит ситуацию, вы увидите, что они на самом деле хотят сделать, это показать любой из divs, по одному за раз, как разделы на домашней странице. Любой может быть показан перед запуском этого кода, и вам нужно будет скрыть остальные и показать желаемый, чтобы попасть туда, куда вы хотите перейти. Это очень распространенный вариант использования.

5. @Nick: А, ладно, я понимаю, о чем ты сейчас говоришь. Мои извинения. Если вы отредактируете свой ответ, я могу дать вам отрицательный ответ : (

Ответ №2:

$('.onediv:not(#div2)').css('display', 'none');

1. Это скрыло бы только те unwanted…it не будет отображаться #div2

2. ммм, да, это было бы, здесь сказано, чтобы скрыть все, кроме #div2

3. кроме того, почему бы вам не попробовать это самостоятельно, прежде чем голосовать против. Спасибо.

4. 1) Я не голосовал против вас, кто-то другой, кто видит, что это не то, о чем просит OP, сделал. И 2) это не отвечает на вопрос, это не делает того, что делал исходный код . Любой из других разделов может быть показан перед запуском этого кода, ваш код, безусловно, не решает эту проблему, они просто все будут скрыты или это не будет иметь никакого эффекта. Предполагается, что код должен иметь тот результат , который описан в вопросе, вы интерпретируете это как то, как display свойства начинаются … тогда зачем вообще нужен какой-либо код? Это неверное толкование вопроса.

5. @Nick: Нет, Ник, вы упускаете суть. Я предлагаю вам перечитать вопрос. «Я хочу использовать jquery для изменения их свойства отображения css, чтобы все они не отображали ничего, кроме id = div2». Единственная причина, по которой у него есть два оператора jquery, — это то, что 2-й оператор компенсирует то, что 1-й делает то, чего он не хочет, чтобы это делало: делает #div2 скрытым

Ответ №3:

это возможно с помощью filter функции, но не рекомендуется по соображениям производительности:

 $('.onediv').hide().filter('#div2').show();

Ответ №4:

$(‘#div2’).siblings().css(‘display’, ‘none’);

Ответ №5:

Попробуйте это:

 $('.onediv').not('.onediv:last-child').css('display', 'none');

Пожалуйста, не понижайте рейтинг! это работает. проверьте здесь: http://jsfiddle.net/ASBcg /

РЕДАКТИРОВАТЬ: Если вы хотите явно показать этот div, это было бы лучше:

 $('.onediv').css('display', 'block').not('.onediv:last-child').css('display', 'none');

1. Этим вы показываете #div3, а не # div2 … и в целом это просто плохой подход, поскольку вы никоим образом не связаны с элементом, который хочет показать OP.

2. Я думаю, что этот вопрос неправильный с самого начала, в чем причина написания кода всего в одной строке? Также мы можем обратиться к этому div с помощью n-го дочернего элемента, который поддерживается в jQuery

3.Я думаю, вы неправильно поняли вопрос, OP хочет показать a <div> с заданным идентификатором, а не по позиции или чему-то еще … смотрите Мой ответ о том, как это сделать очень просто 🙂

Ответ №6:

Вот креативный (но не обязательно полезный):

 $(".alldivs > div:even").hide();

Вот еще один:

 $(".onediv:not(:eq(1))").hide();

Этот код ожидает, что по умолчанию ваши divs не будут скрыты (т. Е. нет отображения: отсутствует в вашем css)