The action is being applied to several elements, rather than one

Asked

Viewed 52 times

1

I have the following code here: http://jsfiddle.net/felipestoker/SL2EP/3/

When I click on homeListagemLiBt he shows the div buscaAvanHoverDiv, until then perfect! Only I will have 20 equal elements, so whenever I click on homeListagemLiBt it shows all the buscaAvanHoverDiv page. You would have to create an ID number + class 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;}
jquery

  • Your fiddle does not work and your HTML is invalid.

  • I edited again, he was on Onload, hehe. It’s not 100%, but you can get an idea.

  • 1

    You’ve tested it like this? $(this).next().find('.buscaAvanHoverDiv').slideDown();

  • 1

    @Sergio, it worked, thank you very much!

2 answers

2

In addition to relying on ids or numbered classes, you can also take advantage of the HTML structure itself:

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

This chain of commands does the following:

  • $(this) Find the element that triggered the event

  • siblings('li.p-relative') search for the tags at the same level as tag current, filters only those that are li and have the class p-relative.

  • children('div.buscaAvanHoverDiv')search for daughters of this type div classy buscaAvanHoverDiv.

Of course, you don’t necessarily have to type so strongly (only classes would be enough, but I like to create selectors using good CSS practices). If the tag to be animated is always the next after the current you can use the method next as suggested by Sergio. Case div may be an indirect descendant of li (a granddaughter, great-granddaughter, etc - which is not the case in the example), replace the method children for find.

Jsfiddle

2


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

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

then you can use just like jQuery:

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

Browser other questions tagged jquery

You are not signed in. Login or sign up in order to post.