How do I traverse the selector from select tag to button tag?-CodePudding

I have this HTML code below. I want to change the attribute of the button using a dropdown menu. I have a lot of this set in a page so selector by ID is not an option. (I already thought of having ID individually but that will be my last resort.)

$('.shirtSize').on('change', function() {
  $(this).parent().children("button").attr("data-item-custom1-value", this.value);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
  <span>
         <select >
           <option>S</option>
           <option>M</option>
           <option>L</option>
           <option>XL</option>
         </select>
       </span>
  <span>
         <select >
           <option>White</option>
           <option>Blue</option>
         </select>
       </span>
  <span>
         <button >Add To Cart</button>
       </span>
</div>

CodePudding user response：

The parent of the select is the span. The button is not a child of the span.

You need to go all the way up to the div, then search for the button within that.

$('.shirtSize').on('change', function() {
  $(this).closest("div.product-item-content").find("button").attr("data-item-custom1-value", this.value);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
  <span>
     <select >
       <option>S</option>
       <option>M</option>
       <option>L</option>
       <option>XL</option>
     </select>
   </span>
  <span>
     <select >
       <option>White</option>
       <option>Blue</option>
     </select>
   </span>
  <span>
     <button >Add To Cart</button>
   </span>
</div>

CodePudding user response：

Barmar's solution seems to change the button data attribute only the first time and will also only assign the data of the first select element. The following snippet will collect both select values and assign them (repeatedly) to the button element's data attribute:

$(document.body).on('change',"select", function() {
  let p=$(this).closest("div.product-item-content");
  $("button",p).data("item-custom1-value",$("select",p).get().map(s=>s.value).join("-"));
  console.log($("button",p).data("item-custom1-value"));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
  <span>
     <select >
       <option>S</option>
       <option>M</option>
       <option>L</option>
       <option>XL</option>
     </select>
   </span>
  <span>
     <select >
       <option>White</option>
       <option>Blue</option>
     </select>
   </span>
  <span>
     <button >Add To Cart</button>
   </span>
</div>
<div >
  <span>
     <select >
       <option>A</option>
       <option>B</option>
       <option>C</option>
       <option>DL</option>
     </select>
   </span>
  <span>
     <select >
       <option>Red</option>
       <option>Green</option>
       <option>Black</option>
       <option>White</option>
     </select>
   </span>
  <span>
     <button >Add To Cart</button>
   </span>
</div>