Question 165037 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

What’s the index of the div that matches the result? #jQuery

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);
});
Tags:

2

Answers


  1. 0

    Updated code as per your modified question

    $("#PSelect").on("change", function() {
    var selectedValue = $(this).val();
    var matchingIndex = $("#PSelect option[value='" + selectedValue + "']").index();

    console.log("matchingIndex " + matchingIndex);
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="PSelect" name="Pselect">
  <option value="">Items</option>
  <option id="scarf" value="Green Scarf">Green 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>
    Login or Signup to reply.
  2. 0

    You can achieve desired result using attribute selector [] and .index() method from jquery. Check my comments in the code.

    References

    $("select").on("change", function() {
  // get current selected value
  let val = $(this).val();

  if (val) {
    // selector ".PLink a[href$='" + val + "']" will try to find any a which is having href value ends with val.
    // we can use href*=val to check for contains & href^=val to check starts with
    // Then use .index and provide selector for actual list from which we need to get index of selected element.
    // index value will start from 0. So in your case you need to use index + 1
    let index = $(".PLink a[href$='" + val + "']").index('.PLink a');
    if (index != -1) {
      alert(index + 1);
    }
  }
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>

<select>
  <option value="">Select</option>
  <option value="scarf">scarf</option>
  <option value="shirt">shirt</option>
  <option value="jacket">jacket</option>
  <option value="gloves">gloves</option>
</select>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search