问题

以下是您要翻译的内容：

我正在触发一个点击事件，并且它给我以下对象
Object { 0: option
, length: 1 }
​
0: <option value="1256" selected="selected">
​
length: 1
​
<prototype>: Object { jquery: "3.5.1", constructor: S(e, t), length: 0, … }
以下是我的HTML代码，带有选择选项。我想获取`class="cat_desc_hidden"`的`id="category_name"`作为类别名称是动态的
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
var div_id = $(this).closest(&#39;div&#39;).find(&#39;.cat_desc_hidden&#39;).attr(&#39;id&#39;);
console.log(div_id)
<!-- language: lang-html -->
<div class=&quot;product-list-right&quot;>
<div class=&quot;product-sku&quot;>
</div>
<div class=&quot;product-title&quot;>
<h3 class=&quot;product-title-content&quot;>Product Name</h3>
<div class=&quot;product-price&quot;></div>
</div>
<div class=&quot;cat_desc_hidden&quot; id=&quot;category_name&quot;></div>
<div class=&quot;product-var-form&quot;>
<div id=&quot;commerce-product-add-to-cart-form--cMDFV37898o&quot;>
<form class=&quot;commerce-order-item-add-to-cart-form-commerce-product-12345 commerce-order-item-add-to-cart-form&quot; data-drupal-selector=&quot;commerce-order-item-add-to-cart-form-commerce-product-12345&quot; action=&quot;/product-listing/lenses&quot; method=&quot;post&quot; id=&quot;commerce-order-item-add-to-cart-form-commerce-product-12345&quot;
accept-charset=&quot;UTF-8&quot;>
<p data-drupal-selector=&quot;edit-part-id-sku&quot;></p>
<div class=&quot;product-sku&quot;> 12345</div>
<p></p>
<p data-drupal-selector=&quot;edit-variation-description&quot;>This is decription</p>
<div class=&quot;field--type-entity-reference field--name-purchased-entity field--widget-commerce-product-variation-title js-form-wrapper form-group&quot; data-drupal-selector=&quot;edit-purchased-entity-wrapper&quot; id=&quot;edit-purchased-entity-wrapper--61234Lhn6k8&quot;>
<fieldset class=&quot;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&quot;>
<label for=&quot;edit-purchased-entity-0-variation--12345_trMk&quot; class=&quot;js-form-required form-required&quot;>--Please select--</label>
<select data-drupal-selector=&quot;edit-purchased-entity-0-variation&quot; id=&quot;edit-purchased-entity-0-variation--1235_trMk&quot; name=&quot;purchased_entity[0][variation]&quot; class=&quot;form-select required custom-select&quot; required=&quot;required&quot; aria-required=&quot;true&quot;>
<option value=&quot;0&quot;>-- Select an option below --</option>
<option value=&quot;12345&quot;>variation-1</option>
<option value=&quot;1256&quot; selected=&quot;selected&quot;>Variation -2</option>
</select>
</fieldset>
</div>
<input autocomplete=&quot;off&quot; data-drupal-selector=&quot;form-t67qywabboin-1256121-t5uile86euubxxikznq&quot; type=&quot;hidden&quot; name=&quot;form_build_id&quot; value=&quot;form-t67qywabboin-1256121-t5uile86euubxxikznq&quot; class=&quot;form-control&quot;>
<input data-drupal-selector=&quot;edit-commerce-order-item-add-to-cart-form-commerce-product-12345-form-token-cmsc-arciwo&quot; type=&quot;hidden&quot; name=&quot;form_token&quot; value=&quot;form-t67qywabboin-1256121-t5uile86euubxxikznq&quot; class=&quot;form-control&quot;>
<input data-drupal-selector=&quot;edit-commerce-order-item-add-to-cart-form-commerce-product-12345-5qaziifj8eo&quot; type=&quot;hidden&quot; name=&quot;form_id&quot; value=&quot;commerce_order_item_add_to_cart_form_commerce_product_58667&quot; class=&quot;form-control&quot;>
<div class=&quot;field--type-decimal field--name-quantity field--widget-commerce-quantity js-form-wrapper form-group&quot; data-drupal-selector=&quot;edit-quantity-wrapper&quot; id=&quot;edit-quantity-wrapper--Bfdsf9OpdVes&quot;>
<fieldset class=&quot;js-form-item js-form-type-number form-type-number js-form-item-quantity-0-value form-item-quantity-0-value form-group&quot;>
<label for=&quot;edit-quantity-0-value--_gdfgfdQTM&quot;>Quantity</label>
<input data-drupal-selector=&quot;edit-quantity-0-value&quot; type=&quot;number&quot; id=&quot;edit-quantity-0-value--_asddJwQTM&quot; name=&quot;quantity[0][value]&quot; value=&quot;1&quot; step=&quot;1&quot; min=&quot;1&quot; placeholder=&quot;&quot; class=&quot;form-number form-control&quot;>
</fieldset>
</div>
<div class=&quot;entity-content-form-footer js-form-wrapper form-group&quot; data-drupal-selector=&quot;edit-footer&quot; id=&quot;edit-footer--asfdsfa3o7v4&quot;>
<div data-drupal-selector=&quot;edit-price&quot; class=&quot;field field--name-field-price field--type-commerce-price field--label-above&quot;>
<div class=&quot;field__label&quot;>Price</div>
<div class=&quot;field__item&quot;>$500.00</div>
</div>
</div>
<div data-drupal-selector=&quot;edit-actions&quot; class=&quot;form-actions js-form-wrapper form-group&quot; id=&quot;edit-actions--dgdgdA1JNcI&quot;><button class=&quot;button--add-to-cart button button--primary js-form-submit form-submit btn btn-primary&quot; data-drupal-selector=&quot;edit-submit
<details>
<summary>英文:</summary>
I am triggering an click event and it give me object as below
Object { 0: option
, length: 1 }
​
0: &lt;option value=&quot;1256&quot; selected=&quot;selected&quot;&gt;
​
length: 1
​
&lt;prototype&gt;: Object { jquery: &quot;3.5.1&quot;, constructor: S(e, t), length: 0, … }
Below is my HTML code with select option. I want to get `id=&quot;category_name&quot;` of `class=&quot;cat_desc_hidden&quot;` as category name is dynamic
&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;
&lt;!-- language: lang-js --&gt;
var div_id = $(this).closest(&#39;div&#39;).find(&#39;.cat_desc_hidden&#39;).attr(&#39;id&#39;);
console.log(div_id)
&lt;!-- language: lang-html --&gt;
&lt;div class=&quot;product-list-right&quot;&gt;
&lt;div class=&quot;product-sku&quot;&gt;
&lt;/div&gt;
&lt;div class=&quot;product-title&quot;&gt;
&lt;h3 class=&quot;product-title-content&quot;&gt;Product Name&lt;/h3&gt;
&lt;div class=&quot;product-price&quot;&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;cat_desc_hidden&quot; id=&quot;category_name&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;product-var-form&quot;&gt;
&lt;div id=&quot;commerce-product-add-to-cart-form--cMDFV37898o&quot;&gt;
&lt;form class=&quot;commerce-order-item-add-to-cart-form-commerce-product-12345 commerce-order-item-add-to-cart-form&quot; data-drupal-selector=&quot;commerce-order-item-add-to-cart-form-commerce-product-12345&quot; action=&quot;/product-listing/lenses&quot; method=&quot;post&quot; id=&quot;commerce-order-item-add-to-cart-form-commerce-product-12345&quot;
accept-charset=&quot;UTF-8&quot;&gt;
&lt;p data-drupal-selector=&quot;edit-part-id-sku&quot;&gt;&lt;/p&gt;
&lt;div class=&quot;product-sku&quot;&gt; 12345&lt;/div&gt;
&lt;p&gt;&lt;/p&gt;
&lt;p data-drupal-selector=&quot;edit-variation-description&quot;&gt;This is decription&lt;/p&gt;
&lt;div class=&quot;field--type-entity-reference field--name-purchased-entity field--widget-commerce-product-variation-title js-form-wrapper form-group&quot; data-drupal-selector=&quot;edit-purchased-entity-wrapper&quot; id=&quot;edit-purchased-entity-wrapper--61234Lhn6k8&quot;&gt;
&lt;fieldset class=&quot;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&quot;&gt;
&lt;label for=&quot;edit-purchased-entity-0-variation--12345_trMk&quot; class=&quot;js-form-required form-required&quot;&gt;--Please select--&lt;/label&gt;
&lt;select data-drupal-selector=&quot;edit-purchased-entity-0-variation&quot; id=&quot;edit-purchased-entity-0-variation--1235_trMk&quot; name=&quot;purchased_entity[0][variation]&quot; class=&quot;form-select required custom-select&quot; required=&quot;required&quot; aria-required=&quot;true&quot;&gt;
&lt;option value=&quot;0&quot;&gt;-- Select an option below --&lt;/option&gt;
&lt;option value=&quot;12345&quot;&gt;variation-1&lt;/option&gt;
&lt;option value=&quot;1256&quot; selected=&quot;selected&quot;&gt;Variation -2&lt;/option&gt;
&lt;/select&gt;
&lt;/fieldset&gt;
&lt;/div&gt;
&lt;input autocomplete=&quot;off&quot; data-drupal-selector=&quot;form-t67qywabboin-1256121-t5uile86euubxxikznq&quot; type=&quot;hidden&quot; name=&quot;form_build_id&quot; value=&quot;form-t67qywabboin-1256121-t5uile86euubxxikznq&quot; class=&quot;form-control&quot;&gt;
&lt;input data-drupal-selector=&quot;edit-commerce-order-item-add-to-cart-form-commerce-product-12345-form-token-cmsc-arciwo&quot; type=&quot;hidden&quot; name=&quot;form_token&quot; value=&quot;form-t67qywabboin-1256121-t5uile86euubxxikznq&quot; class=&quot;form-control&quot;&gt;
&lt;input data-drupal-selector=&quot;edit-commerce-order-item-add-to-cart-form-commerce-product-12345-5qaziifj8eo&quot; type=&quot;hidden&quot; name=&quot;form_id&quot; value=&quot;commerce_order_item_add_to_cart_form_commerce_product_58667&quot; class=&quot;form-control&quot;&gt;
&lt;div class=&quot;field--type-decimal field--name-quantity field--widget-commerce-quantity js-form-wrapper form-group&quot; data-drupal-selector=&quot;edit-quantity-wrapper&quot; id=&quot;edit-quantity-wrapper--Bfdsf9OpdVes&quot;&gt;
&lt;fieldset class=&quot;js-form-item js-form-type-number form-type-number js-form-item-quantity-0-value form-item-quantity-0-value form-group&quot;&gt;
&lt;label for=&quot;edit-quantity-0-value--_gdfgfdQTM&quot;&gt;Quantity&lt;/label&gt;
&lt;input data-drupal-selector=&quot;edit-quantity-0-value&quot; type=&quot;number&quot; id=&quot;edit-quantity-0-value--_asddJwQTM&quot; name=&quot;quantity[0][value]&quot; value=&quot;1&quot; step=&quot;1&quot; min=&quot;1&quot; placeholder=&quot;&quot; class=&quot;form-number form-control&quot;&gt;
&lt;/fieldset&gt;
&lt;/div&gt;
&lt;div class=&quot;entity-content-form-footer js-form-wrapper form-group&quot; data-drupal-selector=&quot;edit-footer&quot; id=&quot;edit-footer--asfdsfa3o7v4&quot;&gt;
&lt;div data-drupal-selector=&quot;edit-price&quot; class=&quot;field field--name-field-price field--type-commerce-price field--label-above&quot;&gt;
&lt;div class=&quot;field__label&quot;&gt;Price&lt;/div&gt;
&lt;div class=&quot;field__item&quot;&gt;$500.00&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div data-drupal-selector=&quot;edit-actions&quot; class=&quot;form-actions js-form-wrapper form-group&quot; id=&quot;edit-actions--dgdgdA1JNcI&quot;&gt;&lt;button class=&quot;button--add-to-cart button button--primary js-form-submit form-submit btn btn-primary&quot; data-drupal-selector=&quot;edit-submit&quot; type=&quot;submit&quot; id=&quot;edit-submit--dgfgdQsugdc&quot; name=&quot;op&quot; value=&quot;Add to cart&quot;&gt;Add to cart&lt;/button&gt;
&lt;button class=&quot;btn-link button js-form-submit form-submit btn&quot; data-drupal-selector=&quot;edit-wishlist&quot; formnovalidate=&quot;formnovalidate&quot; type=&quot;submit&quot; id=&quot;edit-wishlist--gdfgdfujOmE&quot; name=&quot;op&quot; value=&quot;Save for Later&quot;&gt;Save for Later&lt;/button&gt;
&lt;/div&gt;
&lt;/form&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot;&gt;&lt;/script&gt;
&lt;!-- end snippet --&gt;
</details>
# 答案1
**得分**: 1
I understand. Here is the translation of the code part:
从你的示例来看，我认为问题出在`closest('div')`这一行。如果`this`是`button.form-submit`，你应该更明确地指定你想要查找的父元素。
尝试：`var div_id = $(this).closest('.product-list-right').find('.cat_desc_hidden').attr('id'); console.log(div_id)`
<details>
<summary>英文:</summary>
Judging from your example I think your problem is in the `closest(&#39;div&#39;)`. If `this` is the `button.form-submit`, you should be more specific which parent you want to find.
Try: `var div_id = $(this).closest(&#39;.product-list-right&#39;).find(&#39;.cat_desc_hidden&#39;).attr(&#39;id&#39;); console.log(div_id)`
</details>