The action is being applied in several elements, instead of one

Navigation
1

I have the following code here: link

When I click on homeListagemLiBt it shows the buscaAvanHoverDiv div, so perfect! But I'm going to have 20 elements equal, so whenever I click on homeListagemLiBt it shows all buscaAvanHoverDiv of the page. Would you have to create an ID + class number to make it work?

The code is shown below:

HTML: 

<li class="homeListagemLi">
    <div class="homeListagemDiv">
        <ul>
            <li>
                <img src="./imagens/pessoa.jpg" height="220" width="220" />
            </li>
            <li><strong>teste</strong>

            </li>
            <li><span>Cargo: Redação</span>

            </li>
            <li><span>Status: Não definido</span>

            </li>
            <li>
                <p>Inscrição: 10/05/2014</p>
            </li>
            <li>
                <p>Última atualização: 10/08/2014</p>
            </li>
            <li>
                <p>Escolaridade: Superir Completo</p>
            </li>
            <li class="homeListagemLiBt"></li>
            <li class="p-relative">
                <div class="buscaAvanHoverDiv">
                    <ul>
                        <li><span>Salário: R$ 1.000,00</span>

                        </li>
                        <li><span>Experiência: haha</span>

                        </li>
                        <li class="clear"></li>
                        <li>
                            <p>Estado civil: Solteiro(a)</p>
                        </li>
                        <li>
                            <p>Idiomas: Inglês (intermediário)</p>
                        </li>
                        <li>
                            <p>Facebook: fbfbfbf</p>
                        </li>
                    </ul>
                </div>
            </li>
        </ul>
    </div>
</li>
<li class="homeListagemLi">
    <div class="homeListagemDiv">
        <ul>
            <li>
                <img src="./imagens/pessoa.jpg" height="220" width="220" />
            </li>
            <li><strong>teste</strong>

            </li>
            <li><span>Cargo: Redação</span>

            </li>
            <li><span>Status: Não definido</span>

            </li>
            <li>
                <p>Inscrição: 10/05/2014</p>
            </li>
            <li>
                <p>Última atualização: 10/08/2014</p>
            </li>
            <li>
                <p>Escolaridade: Superir Completo</p>
            </li>
            <li class="homeListagemLiBt"></li>
            <li class="p-relative">
                <div class="buscaAvanHoverDiv">
                    <ul>
                        <li><span>Salário: R$ 1.000,00</span>

                        </li>
                        <li><span>Experiência: haha</span>

                        </li>
                        <li class="clear"></li>
                        <li>
                            <p>Estado civil: Solteiro(a)</p>
                        </li>
                        <li>
                            <p>Idiomas: Inglês (intermediário)</p>
                        </li>
                        <li>
                            <p>Facebook: fbfbfbf</p>
                        </li>
                    </ul>
                </div>
            </li>
        </ul>
    </div>
</li>

Javascript: 

$(".homeListagemLiBt").click(function () {
    $('.buscaAvanHoverDiv').slideDown();
});

CSS: 

.homeListagemLi{
    width: 284px;
    height: 432px;
    float: left;
    margin-right: 30px;
    background-color: white;
    margin-bottom: 30px;
    position: relative;
}
.homeListagemDiv{
    width: 220px;
    padding-top: 30px;
    padding-left: 30px;
    height: 380px;
}
.homeListagemDiv>ul>li>img{width: 220px;height: 220px;}
.homeListagemDiv>ul>li>strong{color: #00aeef;font-size: 15px;font-family: "open_sansbold";
}
.homeListagemDiv>ul>li>span{color: #414042;font-size: 13px;font-family: "open_sansbold";
}
.homeListagemDiv>ul>li>p{
    color: #808285;
    font-size: 13px;
    font-family: "open_sanssemibold";
    margin-bottom: 3px;
}
.buscaFundoTotalPessoa{
    background-color: #f2f5f6;
    width: 1330px;
    height: 1095px;
    margin: auto;
}
.homeListagemLiBt{
    width: 32px;
    height: 32px;
    bottom: 0;
    right: 0;
    position: absolute;
    background-color: #e6e7e8;
    background-image: url('../imagens/flechaBaixoCinza.jpg');
    background-repeat: no-repeat;
    background-position: center center;
    cursor: pointer;
}
/*.homeListagemLiBt:hover .buscaAvanHoverDiv{
    display: block;
}*/
.buscaAvanHoverDiv {
    background-color: #e6e7e8;
    height: 165px;
    left: -31px;
    position: absolute;
    top: 41px;
    width: 285px;
    z-index: 2;
    display: none;
}
.buscaAvanHoverDiv ul{
    padding-left: 30px;
    padding-top: 30px;
}
.buscaAvanHoverDiv ul>li>span{
    font-family: 'open_sansbold';
    font-size: 13px;
    color: #414042;
}
.buscaAvanHoverDiv ul>li>p{
    font-family: 'open_sanssemibold';
    font-size: 13px;
    color: #808285;
    margin-bottom: 3px;
}
.buscaPaginacao{width: 144px;float: right;margin-right: 50px;}
.buscaPaginacao li{
    width: 32px;
    height: 32px;
    text-align: center;
    line-height: 32px;
    font-family: 'open_sansbold';
    font-size: 18px;
    color: #58595b;
    background-color: white;
    float: left;
    margin-right: 4px;
    cursor: pointer;
}
.buscaPaginacaoFlecha{
    background-image: url("../imagens/paginacaoDir.png");
    background-repeat: no-repeat;
    background-position: center 10px;
    width:9px;
    height: 24px;

}
.buscaPaginacaoFlecha:hover{
    background-position: center -2px;
}
.buscaPaginacao li:hover {background-color: #58595b;color: white;}
    
asked by anonymous 24.07.2014 / 16:10

2 answers

2

Since you want to make slideDown a descending element of the next sibling, like this piece of HTML: 

<li class="homeListagemLiBt"></li>
<li class="p-relative">
      <div class="buscaAvanHoverDiv">

so you can use so with jQuery: 

$(".homeListagemLiBt").click(function () {
    $(this).next().find('.buscaAvanHoverDiv').slideDown();
});
    
24.07.2014 / 16:23
2

In addition to trusting ids or numbered classes, you can also use the HTML structure itself: 

$(this).siblings('li.p-relative').children('div.buscaAvanHoverDiv').slideDown();

This command string does the following:

  • $(this) → Finds the element that triggered the event

  • siblings('li.p-relative') → fetches daughters of this class of type li that have class p-relative .

Of course you do not necessarily have to type so hard (only the classes would be enough, but I like to create selectors using good CSS practices). If the tag to be animated is always the next one after the current one you can use the children('div.buscaAvanHoverDiv') method as suggested by Sergio. If div can be an indirect descendant of buscaAvanHoverDiv (a granddaughter, great-granddaughter, etc - which is not the case in the example), replace the next method with div .

JSFiddle

    
24.07.2014 / 16:19
Does CodeIgniter work on Linux? How to make images take up 100% of the browser