I have a list of divs with the same class, that contain links.
<select id="PSelect" name="Pselect">
<option value="">Items</option>
<option id="scarf" value="White Scarf">White Scarf</option>
<option id="shirt" value="Black Shirt">Black Shirt</option>
<option id="jacket" value="White Jacket">White Jacket</option>
<option id="gloves" value="Yellow Gloves">Yellow Gloves</option>
</select>
<div><div class="PLink"><a href="product/scarf">Green Scarf</a></div></div>
<div><div class="PLink"><a href="product/shirt">Black Shirt</a></div></div>
<div><div class="PLink"><a href="product/jacket">White Jacket</a></div></div>
<div><div class="PLink"><a href="product/gloves">Yellow Gloves</a></div></div>
The select box contains the part of the string found in the URL’s above. I want to be able to return the position of the div that matches the string in the select box. This sounds like an odd thing to do, but the resulting index number will eventually trigger another function.
For example, if someone selects "gloves" from the dropdown, I want the result to be "4" – as this is the index number of the div that contains the class "PLink" and contains the matching string in the URL. So far I have managed to isolate the part of the URL I need, but I just need to be able to return the index number of the div:
So far I have this:
$(".PLink a").each(function () {
var href=$(this).prop('href');
var n = href.lastIndexOf('/');
var cat_code = href.substring(n + 1);
});
2
Answers
Updated code as per your modified question
You can achieve desired result using attribute selector
[]
and.index()
method from jquery. Check my comments in the code.References