javascript - 从元素列表中找出哪个元素被点击

Question

我有几个共享同一个类的 div。我有一个下拉菜单，它在选中时更改其中一个 div 的背景颜色(选项 2 更改 div #2)。
我的问题是如何在单击某个 div 时更改下拉选项？
我有更改实际选项和点击 div 的逻辑，但我无法弄清楚如何准确找到点击了哪个 div(div 是动态创建的，所以它们没有 ID，只有类名) .
有什么方法可以检查相对于具有相同类别的整个 div 列表单击了什么 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>

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

编辑:
我有什么:
select 可以根据选择更改 div 的颜色。
点击一个 div 会改变它自己的颜色。
我需要什么:
单击 div 也会更改选择中的选项。我希望现在更清楚一些

Answer 1

使用 jQuery 您可以使用 .index() 获取点击的 div 的索引

$('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>