jqueryjsobject

get the closest class id attr of an object option

I am triggering an click event and it give me object as below

Object { 0: option , length: 1 } ​ 0: ​ length: 1 ​ : Object { jquery: "3.5.1", constructor: S(e, t), length: 0, … }

Below is my HTML code with select option. I want to get id="category_name" of class="cat_desc_hidden" as category name is dynamic

var div_id = $(this).closest('div').find('.cat_desc_hidden').attr('id');
console.log(div_id)
<div class="product-list-right">
  <div class="product-sku">
  </div>

  <div class="product-title">
    <h3 class="product-title-content">Product Name</h3>
    <div class="product-price"></div>
  </div>

  <div class="cat_desc_hidden" id="category_name"></div>

  <div class="product-var-form">
    <div id="commerce-product-add-to-cart-form--cMDFV37898o">
      <form class="commerce-order-item-add-to-cart-form-commerce-product-12345 commerce-order-item-add-to-cart-form" data-drupal-selector="commerce-order-item-add-to-cart-form-commerce-product-12345" action="/product-listing/lenses" method="post" id="commerce-order-item-add-to-cart-form-commerce-product-12345"
        accept-charset="UTF-8">
        <p data-drupal-selector="edit-part-id-sku"></p>
        <div class="product-sku"> 12345</div>

        <p></p>

        <p data-drupal-selector="edit-variation-description">This is decription</p>

        <div class="field--type-entity-reference field--name-purchased-entity field--widget-commerce-product-variation-title js-form-wrapper form-group" data-drupal-selector="edit-purchased-entity-wrapper" id="edit-purchased-entity-wrapper--61234Lhn6k8">
          <fieldset class="js-form-item js-form-type-select form-type-select js-form-item-purchased-entity-0-variation form-item-purchased-entity-0-variation form-group">
            <label for="edit-purchased-entity-0-variation--12345_trMk" class="js-form-required form-required">--Please select--</label>

            <select data-drupal-selector="edit-purchased-entity-0-variation" id="edit-purchased-entity-0-variation--1235_trMk" name="purchased_entity[0][variation]" class="form-select required custom-select" required="required" aria-required="true">
              <option value="0">-- Select an option below --</option>
              <option value="12345">variation-1</option>
              <option value="1256" selected="selected">Variation -2</option>
            </select>
          </fieldset>
        </div>

        <input autocomplete="off" data-drupal-selector="form-t67qywabboin-1256121-t5uile86euubxxikznq" type="hidden" name="form_build_id" value="form-t67qywabboin-1256121-t5uile86euubxxikznq" class="form-control">
        <input data-drupal-selector="edit-commerce-order-item-add-to-cart-form-commerce-product-12345-form-token-cmsc-arciwo" type="hidden" name="form_token" value="form-t67qywabboin-1256121-t5uile86euubxxikznq" class="form-control">
        <input data-drupal-selector="edit-commerce-order-item-add-to-cart-form-commerce-product-12345-5qaziifj8eo" type="hidden" name="form_id" value="commerce_order_item_add_to_cart_form_commerce_product_58667" class="form-control">
        <div class="field--type-decimal field--name-quantity field--widget-commerce-quantity js-form-wrapper form-group" data-drupal-selector="edit-quantity-wrapper" id="edit-quantity-wrapper--Bfdsf9OpdVes">
          <fieldset class="js-form-item js-form-type-number form-type-number js-form-item-quantity-0-value form-item-quantity-0-value form-group">
            <label for="edit-quantity-0-value--_gdfgfdQTM">Quantity</label>
            <input data-drupal-selector="edit-quantity-0-value" type="number" id="edit-quantity-0-value--_asddJwQTM" name="quantity[0][value]" value="1" step="1" min="1" placeholder="" class="form-number form-control">
          </fieldset>
        </div>

        <div class="entity-content-form-footer js-form-wrapper form-group" data-drupal-selector="edit-footer" id="edit-footer--asfdsfa3o7v4">
          <div data-drupal-selector="edit-price" class="field field--name-field-price field--type-commerce-price field--label-above">
            <div class="field__label">Price</div>
            <div class="field__item">$500.00</div>
          </div>
        </div>

        <div data-drupal-selector="edit-actions" class="form-actions js-form-wrapper form-group" id="edit-actions--dgdgdA1JNcI"><button class="button--add-to-cart button button--primary js-form-submit form-submit btn btn-primary" data-drupal-selector="edit-submit" type="submit" id="edit-submit--dgfgdQsugdc" name="op" value="Add to cart">Add to cart</button>
          <button class="btn-link button js-form-submit form-submit btn" data-drupal-selector="edit-wishlist" formnovalidate="formnovalidate" type="submit" id="edit-wishlist--gdfgdfujOmE" name="op" value="Save for Later">Save for Later</button>
        </div>
      </form>
    </div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Solution

  • Judging from your example I think your problem is in the closest('div'). If this is the button.form-submit, you should be more specific which parent you want to find.

    Try: var div_id = $(this).closest('.product-list-right').find('.cat_desc_hidden').attr('id'); console.log(div_id)