WooCommerce：添加自定义类以选择包装器

Question

A short question: How can I add my custom class select-wrapper to the input wrapper when it only holds a select in it?

<span class="woocommerce-input-wrapper select-wrapper">
    <select name="billing_title" id="billing_title" class="select " data-placeholder="">
       <option value="1" selected="selected">Herr</option><option value="2">Frau</option>
    </select>
</span>

I can't find anything in the web which helps me to come forward with this topic.

Answer 1

You can use the following javascript code.

<script type="text/javascript">
var nodes = document.getElementsByClassName("woocommerce-input-wrapper");

for(var i=0; i<nodes.length; i++) {
    var cnt = 0;
    for (let node of nodes[i].childNodes) {

      if(node.nodeName.toLowerCase() == 'select'){
        cnt++;
        break;
      }

    }
    if(cnt > 0)
    nodes[i].classList.add("select-wrapper");

}
</script>

If you are using any js frameworks like jQuery, you can easily reduce the length of code to 2 or three lines.