Discovering the specific element that was clicked from a collection of elements

Question

Discovering the specific element that was clicked from a collection of elements

I'm dealing with a scenario where multiple divs share the same class. There is a dropdown that alters the background color of one of these divs when a certain option is selected (for example, option 2 changes div #2's background color).
My dilemma lies in how to change the dropdown option when clicking on a specific div. While I understand the process of changing both the dropdown option and div upon click events, I am struggling to pinpoint exactly which div was clicked. Since the divs are generated dynamically and lack unique IDs, I can only rely on their class names.
Is there a way to determine which div was clicked relative to the entire list of divs sharing the same class? Thanks for any guidance provided.
Example snippet:

<select class="size form-control" id="size" name="size">
<option value="1">first div</option>
<option value="2">second div</option>
<option value="4">third div..</option>
</select>

<div class="collection">random</div>
<div class="collection">text</div>
<div class="collection">inside</div>
<div class="collection">here</div>

Edit:
Current status:
Dropdown triggers color change in div based on selection.
Clicking a div results in its own color alteration.
Objective:
Clicking a div should also update the dropdown selection. I hope this explanation clarifies the situation.

javascript jquery html css

Answer 1

Answer №1

Using jQuery, you have the ability to retrieve the index of a clicked div by utilizing .index()

$('div.collection').click(function () {
    var index = $('div.collection').index($(this));
    console.log(index);

    $('select').val(index + 1);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="collection">Div1</div>
<div class="collection">Div2</div>
<div class="collection">Div3</div>
<div class="collection">Div4</div>

<select class="size form-control" id="size" name="size">
    <option value="1">first div</option>
    <option value="2">second div</option>
    <option value="4">third div..</option>
</select>

Answer 2

Using jQuery, you have the ability to retrieve the index of a clicked div by utilizing .index()

$('div.collection').click(function () {
    var index = $('div.collection').index($(this));
    console.log(index);

    $('select').val(index + 1);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="collection">Div1</div>
<div class="collection">Div2</div>
<div class="collection">Div3</div>
<div class="collection">Div4</div>

<select class="size form-control" id="size" name="size">
    <option value="1">first div</option>
    <option value="2">second div</option>
    <option value="4">third div..</option>
</select>

Answer 3

Answer №2

If you want to achieve this functionality, you can make use of jQuery in a very straightforward manner:

<select class="size form-control" id="size" name="size">
  <option value="1">first div</option>
  <option value="2">second div</option>
  <option value="4">third div..</option>
</select>

<div class="collection">Div1</div>
<div class="collection">Div2</div>
<div class="collection">Div3</div>
<div class="collection"&.gt;Div4</div>

With the help of jQuery:

$('div.collection').click(function(){
var index = $('div.collection').index($(this)) + 1;
  $('select').val(index);
});

Check out this example: http://codepen.io/ilanus/pen/zBgvJr

Answer 4

If you want to achieve this functionality, you can make use of jQuery in a very straightforward manner:

<select class="size form-control" id="size" name="size">
  <option value="1">first div</option>
  <option value="2">second div</option>
  <option value="4">third div..</option>
</select>

<div class="collection">Div1</div>
<div class="collection">Div2</div>
<div class="collection">Div3</div>
<div class="collection"&.gt;Div4</div>

With the help of jQuery:

$('div.collection').click(function(){
var index = $('div.collection').index($(this)) + 1;
  $('select').val(index);
});

Check out this example: http://codepen.io/ilanus/pen/zBgvJr

Answer 5

Answer №3

Place the parent div around the existing div and utilize index() to retrieve the position of the div

$('.collection').click(function(){
  var position = $(this).index()+1;
  console.log(position);
  $('.size').val(position);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="size form-control" id="size" name="size">
<option value="1">first div</option>
<option value="2">second div</option>
<option value="3">third div..</option>
  <option value="4">Fourth div..</option>
</select>
<div>
  <div class="collection">random</div>
  <div class="collection">text</div>
  <div class="collection">inside</div>
  <div class="collection">here</div>
</div>

Answer 6

Place the parent div around the existing div and utilize index() to retrieve the position of the div

$('.collection').click(function(){
  var position = $(this).index()+1;
  console.log(position);
  $('.size').val(position);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="size form-control" id="size" name="size">
<option value="1">first div</option>
<option value="2">second div</option>
<option value="3">third div..</option>
  <option value="4">Fourth div..</option>
</select>
<div>
  <div class="collection">random</div>
  <div class="collection">text</div>
  <div class="collection">inside</div>
  <div class="collection">here</div>
</div>

Answer 7

Answer №4

If you want to try out this code snippet, check out this Pen link.

<div id='containerDiv'>
   <div class="clickable">1</div>
   <div class="clickable">2</div>
   <div class="clickable">3</div>
   <div class="clickable">4</div>
</div>
<select name="dropdownList">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>

<style>
.clickable{
  clear:both;
  width:20px;
  height:20px;
  border:1px solid black;
  margin: 20px;
}
</style>

<script>
$('#containerDiv').on('click','.clickable',function(){
  console.log($(this).index());
      var index= $(this).index();
      $('select[name=dropdownList] option:eq('+index+')').attr('selected', 'selected');
});
</script>

Try it out and let me know if everything is working as expected. Thank you!

Answer 8

If you want to try out this code snippet, check out this Pen link.

<div id='containerDiv'>
   <div class="clickable">1</div>
   <div class="clickable">2</div>
   <div class="clickable">3</div>
   <div class="clickable">4</div>
</div>
<select name="dropdownList">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>

<style>
.clickable{
  clear:both;
  width:20px;
  height:20px;
  border:1px solid black;
  margin: 20px;
}
</style>

<script>
$('#containerDiv').on('click','.clickable',function(){
  console.log($(this).index());
      var index= $(this).index();
      $('select[name=dropdownList] option:eq('+index+')').attr('selected', 'selected');
});
</script>

Try it out and let me know if everything is working as expected. Thank you!

Discovering the specific element that was clicked from a collection of elements

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

JavaScript functions with similar parent names

The Mongodb database is failing to recognize updates made to the Mongoose schema

Align the center of a grid div that does not contain any items

collection of assurances and the Promise.all() method

How to eliminate the added URL segment from the URL parameter when using $.ajax with jQuery

Trouble with Selecting an un-ordered list menu item in Selenium Java's side bar navigation

Activate a button only when a value is inputted into a text box associated with a chosen radio button

Is there a way to drop a pin on the Google Maps app?

oj-select-one displays a comprehensive list of values in the dropdown

Show random images of different sizes by employing jquery

Guidance on sharing an image on Twitter using Node.js

Why is the jQuery ajax call throwing an error about sendToValue not being defined? What could be causing this issue in the jQuery code

Is it possible to capture key events within a frame even when the source differs?

Determining the successful completion of an ajax request using jQuery editable plugin

Enhancing Couchdb documents with unique id and author information through an update handler

Mastering the art of throwing and managing custom errors from the server to the client side within Next.js

Refresh dynatable after inserting additional rows

Retrieve data that resets to undefined upon reloading from an array

Scroll the div back to the top when the form is submitted

Step-by-step guide on retrieving news_id and displaying it in an alert when an item