2015-05-11 1 views
1

Я пытаюсь FADEOUT элементы, используя кодFadeOut элемент

$('[title!="head"]').each(function() { 
    $(this).fadeOut(100); 
}); 

С выше коде, все элементы гаснуть в том числе с $('[title="head"]').

код отлично работает для условия

$('[title="head"]') 

Все комментарии будут высоко оценены.

+0

Можете ли вы добавить HTML также – Tushar

+1

, вы должны попробовать: not() selector $ (': not ([title = "head"]')), может быть, но это странно, что он уже не работает – Daniel

+0

Вам просто нужно было настроить * только элементы с заголовком *, затем целевые, у которых нет «головы», поэтому '$ ('[title] [title!= head] ') 'будет делать трюк. Ответ добавлен ниже. Фильтр здесь переполнен. –

ответ

0

Вы можете использовать filter для фильтрации элементов, имеющих title не как "голова"

Demo

$(document).ready(function() { 
 
    $('div') 
 
    .filter(function() { 
 
     return $(this).attr('title') !== 'head'; 
 
    }) 
 
    .fadeOut(100); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> 
 
<div title="head">HEAD</div> 
 
<div title="myhead">MY HEAD</div> 
 
<div title="your head">YOur HEAD</div> 
 
<div title="head">Again HEAD</div> 
 
<div title="headNo">HEAD No</div>

+1

Нет ничего плохого в использовании селектора not equals ('! ='). Проблема заключается в селекторе в самом вопросе, который выбирает все, что '! =" Head ". Единственная причина, по которой это работает, - это то, что вы фильтруете коллекцию 'div', вы можете написать '$ ('div [title! =" Head "]'). FadeOut()' и она будет работать – billyonecan

+0

@ Neel Вам нужно обернуть код в 'ready' – Tushar

+0

Спасибо всем. То, что было сделано Тушаром, отлично работает, Билли также сделал интересный момент. – Neel

0

просто использовать: не()

$('body *:not([title="head"])').each (function(){ 
    $(this).fadeOut(100); 
}); 
+2

Это будет соответствовать * всем остальным элементам на странице *, поэтому недостаточно для использования в реальном мире. –

0

Ваш селектор является проблемой: $('[title!="head"]') выберет все, кроме элементов с title="head", а затем выцветает.

Это должно сделать его более ясным, рассмотрим следующую разметку:

<body> 
    <div title="head">Hello World!</div> 
</body> 

Ваш селектор в этом примере будет выбрать body, а затем увядают его, и как <div> является дочерним <body>, что будет в результате косвенно исчезают. У вас должно получиться что-то вроде этого:

<body style="display: none;"> 
    <div title="head">Hello World!</div> 
</body> 
0

Фильтр на самом деле переполнен здесь. Фактическая проблема касалась всех элементов, включая body, как упоминает @billyonecan. Основываясь на описании «все элементы исчезают», никаких проблем с DOM не было.

Решение предназначено для целевых только определенных элементов, например. только элементы, которые имеют атрибут title, затем добавьте !=head:

например.

$('[title][title!=head]') 

JSFiddle:https://jsfiddle.net/wfp8o9hx/1/

или

$('div[title][title!=head]').fadeOut(100); 

JSFiddle:https://jsfiddle.net/wfp8o9hx/

только предпочтительно что-то более конкретно, чем просто div :)

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