Как исключить дочерний элемент в селекторе детей с помощью jquery?

Question

У меня есть родительский элемент div #mmm-a, установленный на visibility, hidden с помощью предыдущей функции on click, и я использую следующий код, чтобы он появлялся на странице (при нажатии):

jQuery("#mmm-a").css("visibility", "visible").fadeTo(300, 1);

Это работает нормально, но когда я пытаюсь исключить дочерний элемент #mmm-b из родительского элемента div #mmm-a, он не работает, я пробовал это (и варианты):

jQuery("#mmm-a").not("#mmm-b").css("visibility", "visible").fadeTo(300, 1);

Что не так с моим кодом? Как мне сделать весь div снова видимым, но скрыть один элемент внутри него?

Answer 1

jQuery("#mmm-a") выбирает только один элемент с идентификатором "ммм-а". .not("#mmm-b") не исключает ничего из этого выбора - это все еще одноэлементный список. (Единственный способ сработать, если один и тот же элемент имеет оба идентификатора: тогда .not() исключит его, что приведет к выбору с нулевым элементом - но это невозможно, поскольку один элемент не может иметь два идентификатора.)

Многоэлементное выделение, исключающее одного дочернего элемента, будет больше похоже на $('#mmm-a').find(':not(#mmm-b)') или $('#mmm-a :not(#mmm-b)') - они будут возвращать список всех дочерних элементов mmm-a, которые не являются mmm-b.

Но и здесь это не поможет, потому что вы используете fadeTo, который анимирует непрозрачность элемента, а не его видимость. Непрозрачность всегда влияет на дочерние элементы: элемент с нулевой непрозрачностью всегда будет иметь все свое содержимое с нулевой непрозрачностью, исключить дочерний элемент из этого невозможно.

В отличие от непрозрачности, дочерние элементы могут быть исключены из visibility правил:

#a {visibility:hidden}
#b {visibility:visible}

<div id="a"> hidden parent
  <div id="b">visible child</div>
</div>

... но visibility нельзя анимировать (нет частичного состояния между «видимым» и «скрытым».)

Если вам нужна прозрачность родительского объекта для анимации, а для того, чтобы дочерний элемент оставался видимым, единственный способ состоит в том, чтобы реструктурировать ваш HTML-код таким образом, чтобы оставшийся видимым элемент не был дочерним элементом того, который должен быть скрыт.

РЕДАКТИРОВАТЬ: хотя в комментариях ниже, вы хотите сделать это наоборот:

Я хочу, чтобы дочерний элемент оставался скрытым, в то время как остальная часть div снова исчезла, чтобы манипулировать дочерней видимостью позже

... что намного проще!

$('#go').on("click", function() {
  $('#b').css("visibility","hidden"); // hide child element
  $('#a')
    .css("opacity","0") // set opacity to 0 first, so the animation will work later
    .css("visibility","visible") // set visiblity to visible
    .fadeTo(300, 1) // animate opacity from 0 to 1
});

#a, #v {visibility: hidden}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="a"> parent made visible
  <div id="b">child stays hidden</div>
</div>
<button id="go">Click me</button>

Answer 2

jQuery("#mmm-a").not("#mmm-b") это означает, что выберите #mmm-a, который не идентифицирует mmm-b, тогда как вам нужно исключить особого ребенка из списка детей.

Используйте это вместо

$("#mmm-a :not(#mmm-b)").css("visibility", "visible");

#mmm-a {visibility: hidden}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mmm-a">
  <div>1</div>
  <div id="mmm-b">#mmm-b</div>
  <div>3</div>
</div>