2015-06-18 3 views
3

У меня есть div, который я хотел бы скрыть вместе со всеми его children. Я думал, что простой selector.hide() будет делать трюк, но он все еще там.jQuery - Как скрыть элемент и его детей?

HTML

<div class="row well"> 
    <div class="artistAlbumInfo well col-md-6 "> 
    <h3><span id="artist"></span> - <span id="track"></span></h3> 
    <img src="" id="art" class="albumArt"> 
    </div> 
    <div class="col-md-6"> 
    <h3 id="album"></h3> 
    <h4>Playstate <p id="playState"></p></h4> 
    <h4>Position <p id="position"></p></h4> 
    </div> 
</div> 

JQuery

$(document).ready(function() { 
    $('.row .well').hide(); 
}); 

http://jsfiddle.net/375c8v2a/1/

Любые идеи?

+0

Ты сделав это неправильно, просто удалите второй класс '.well', вам нужно всего лишь указать первый '$ ('. row '). hide();'. Посмотрите онлайн-пример на jsFiddle - http://jsfiddle.net/375c8v2a/2/ –

+0

У меня на самом деле есть несколько «строк», и я хочу только настроить таргетинг на оба класса. –

+0

Если 'well' - класс, созданный только для этой конкретной строки, с целью скрытия этой строки, вы можете использовать его как триггер, чтобы скрыть его так:' $ ('. Well'). Hide() ; ' –

ответ

3

То, что вы не работали, потому что .row .well означает «элемент с классом wellвнутри (в детстве или более глубокого потомка) элемента с классом row. В CSS, пространство является descendant combinator

Чтобы seelct элемента, который имеет как классов, удалить пространство:.

$(document).ready(function() { 
    $('.row.well').hide(); 
    // ----^ 
}); 

Это означает «элемент класса row и класс well».

+0

Я вижу. спасибо –

6

Вам не нужно пространство между классами, если вы хотите, чтобы скрыть только те, с обоими классами

$('.row.well').hide(); 

Чтобы сделать что-либо или добавить запятую

$('.row, .well').hide(); 
3

$ («строка»).скрывать();

удалите второй класс

+0

Это не сработает, потому что на самом деле у меня есть несколько классов' row'. Я включил второй класс, чтобы попытаться найти более конкретный выбор. –

1

Из того, что я читал по комментариям, был специально создан класс .well, чтобы указать, какой класс .row будет скрываться, так как у вас много классов row. После этого вы можете использовать его в качестве триггера, чтобы скрыть, что row, вместо того, чтобы делать: $('.row.well').hide(); вы можете просто указать целевой класс, выполнив:

$('.well').hide(); 

Нажмите здесь, чтобы увидеть example on jsFiddle

Смежные вопросы