找出从元素列表中单击的元素

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>

编辑:
我有:
选择可以根据选择更改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>