Cómo hacer clic y elegir elementos div en jQuery

Ok so I want to make so in the profile list, you can click on the profile and it will be highlighted (another background color, lets say yellow). And when you have highlighted this and press "save", somehow i wish to pick the highlighted profiles id and output them.

Entonces mi primera pregunta:


How can i do something like so you can pick/unpick by clicking/unclicking? And they will be highlighted. And how can i make a selector that grabs these highlighted profile boxes?

Maybe there already exists a function for this or plugin?

Else how can i do this clicking/unclicking to highlight/unhighlight and then output the highlighted element's id attribute in an alert, that appears when you click on a "Show what you choose" button

preguntado el 27 de agosto de 11 a las 17:08

you have few mistakes in css, check this .profile{ width: 50px; height: 80px; background-color: black; border: 1px solid #FFF; } -

On your jsfiddle, you're missing a semicolon in the css. I made a slight update here: jsfiddle.net/5pZ2v/2 -

@itsmatt kobe thanks! fixed url in question -

4 Respuestas

Usa algo como esto:


Entonces usa div.profile.selected to style the selected profiles in your css. Then when you want to select all the divs that are highlighted just use $('div.profile.selected'). If you want to know how many are selected just use $('div.profile.selected').length. He aquí un ejemplo:


Respondido 27 ago 11, 22:08

thanks for your answer! Instead of fadeOut() how can i make an array with all the highlighteds id="" attribute value? - Karem

@Karem I updated my JSFiddle so it outputs an array of all the selected divs' ids now. - Paul

Did you try .toggleClass()? i.e. create a css class highlight and add

 $("div").click(function () {


Ivo Stoykov

PS: Look documentation aquí

Respondido 27 ago 11, 22:08

$("div .your_classname").length will return how many divs have class="your_classname" - i100

You can use the click function of jQuery to mark/unmark a div.

 $("div.profile").click(function () {
     // if it's unmarked we mark

A continuación, puede utilizar each to get all the marked div :

$("div.selected").each(function () {
    // do what you want

For the boxes not appearing black, it comes from a missing semicolon after the height attribute ;)

Respondido 27 ago 11, 22:08

I didn't knew the toggleClass() function mentionned by i100, you can use that instead of my first function... - Sylvain Cleymans

If i would like to press on button input[name=test], and when i press this i would like to alert how many is highlighted? (has the class) How would i do that? - Karem

Puedes usar $("input[name=test]").click(function() { alert($(".selected").length); ) }); - Sylvain Cleymans


First you need to give your DIVs an ID then look at my Fiddle.

$("div").click(function () {


    $('#output').html('');                           // clear the output div

    // Loop through each selected div and output it's ID
       $('#output').append('<div>' + $(this).attr('id') + '</div>')

Respondido 27 ago 11, 22:08

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.