JQuery EQ для отображения затухания в блоке

Question

То, что я пытаюсь сделать, - это исчезнуть в блоке, который на CSS не отображается, вот что я получил:

CSS:

.white_content {
    display: none;
    position: relative;;
    width: 5%;
    height: 5%;
    padding: 24px;
    border: 16px solid orange;
    background-color: some;
    z-index:1;
}

JQuery

$(function(){
    $("#act1").click(function() {
        $('li:eq(0)').fadeIn(400); 
    }); 
    $("#act2").click(function() {
        $('li:eq(1)').fadeIn(400); 
    }); 
}); 

и HTML:

<div id="act1">first click</div> 
<div id="act2">second click</div>  

<ul>
    <li><div id="tos" class="white_content">  
    some text...
    </div></li> 

    <li><div id="tos" class="white_content">   
    other some text
    </div></li> 
</ul>

Если я изменю на jQuery li:eq(0) на #tos, он будет работать нормально, но я не могу заставить его работать с li:eq(0), поскольку это то, что я пытаюсь сделать.

Answer 1

попробовать:

$(function(){
    $("#act1").click(function() {
        $('li:eq(0) div.white_content').fadeIn(400); 
    }); 
    $("#act2").click(function() {
        $('li:eq(1) div.white_content').fadeIn(400); 
    }); 
});

Answer 2

Здесь есть несколько проблем.Прежде всего, id должны быть уникальными - они не могут повторяться, как вы сделали в коде, который вы здесь.Во-вторых, свойство display: none установлено на div.white_content, а не li, поэтому ваш селектор должен быть li:eq(n) div.white_content.

Даже тогда этот код должен быть легко переписан во что-то более аккуратное, например:

$('div[id^=act]').click(function(){
    var n = parseInt(this.id.substring(3), 10);
    $('li').eq(n-1).find('.white_content').fadeIn(400);
});

---

Учитывая ваш HTML, я думаю, это то, что вам нужно:*

Вы используете дубликат id s, который является недействительным HTML.Я позволил себе сменить их на классы, что является правильным способом сделать это.Функция closest ищет ближайшего предка, который соответствует селектору, в данном случае div, который содержит элементы.

Кстати, поскольку li являются элементами уровня блока, вы можете пропустить div и поместить все свое содержимое непосредственно в элемент li, исключив один слой HTML.