我试图用某个类找到这个span，然后找到与另一个指定类找到最接近的div并隐藏它。也许我错过了什么？
谁能明白为什么？
$(document).ready(function() {
if ($('.ty-product-detail .product-left .stock-wrap span').hasClass('ty-qty-out-of-stock')) {
$(this).closest('.ty-product-block__option').hide();
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="ty-product-block ty-product-detail">
<div class="ty-product-block__wrapper clearfix">
<div class="ty-product-block__img-wrapper">
<div class="ty-product-block__img cm-reload-487" id="product_images_487_update">
<div class="ty-product-img cm-preview-wrapper">
<a id="det_img_link_48756b03bbdd708a_2203" data-ca-image-id="preview[product_images_48756b03bbdd708a]" class="cm-image-previewer cm-previewer ty-previewer" data-ca-image-width="550" data-ca-image-height="330" href="http://beanbags.ambientlounge.com/images/thumbnails/550/550/detailed/2/sakura-pink-2_te4i-3d.jpg?t=1449211457"
title="">
<img class="ty-pict " id="det_img_48756b03bbdd708a_2203" src="http://beanbags.ambientlounge.com/images/thumbnails/280/280/detailed/2/sakura-pink-2_te4i-3d.jpg?t=1449387170" alt="" title="" data-cloudzoom="zoomImage: "http://beanbags.ambientlounge.com/images/thumbnails/550/550/detailed/2/sakura-pink-2_te4i-3d.jpg?t=1449211457""
style="-webkit-user-select: none;"><span class="ty-previewer__icon hidden-phone"></span>
</a>
<a id="det_img_link_48756b03bbdd708a_1806" data-ca-image-id="preview[product_images_48756b03bbdd708a]" class="cm-image-previewer hidden cm-previewer ty-previewer" data-ca-image-width="400" data-ca-image-height="271" href="http://beanbags.ambientlounge.com/images/thumbnails/400/400/detailed/1/dims-zen.jpg?t=1440742425"
title="">
<img class="ty-pict " id="det_img_48756b03bbdd708a_1806" src="http://beanbags.ambientlounge.com/images/thumbnails/280/280/detailed/1/dims-zen.jpg?t=1440919130" alt="" title="" data-cloudzoom="zoomImage: "http://beanbags.ambientlounge.com/images/thumbnails/400/400/detailed/1/dims-zen.jpg?t=1440742425""><span class="ty-previewer__icon hidden-phone"></span>
</a>
</div>
<div class="ty-product-thumbnails ty-center cm-image-gallery" id="images_preview_48756b03bbdd708a" style="width: 280px;">
<a data-ca-gallery-large-id="det_img_link_48756b03bbdd708a_2203" class="cm-thumbnails-mini active ty-product-thumbnails__item">
<img class="ty-pict " id="det_img_48756b03bbdd708a_2203_mini" src="http://beanbags.ambientlounge.com/images/thumbnails/35/35/detailed/2/sakura-pink-2_te4i-3d.jpg?t=1449387170" alt="" title="">
</a>
<a data-ca-gallery-large-id="det_img_link_48756b03bbdd708a_1806" class="cm-thumbnails-mini ty-product-thumbnails__item">
<img class="ty-pict " id="det_img_48756b03bbdd708a_1806_mini" src="http://beanbags.ambientlounge.com/images/thumbnails/35/35/detailed/1/dims-zen.jpg?t=1440919130" alt="" title="">
</a>
</div>
<!-- Inline script moved to the bottom of the page -->
<!-- Inline script moved to the bottom of the page -->
<!-- Inline script moved to the bottom of the page -->
<!-- Inline script moved to the bottom of the page -->
<!--product_images_487_update-->
</div>
</div>
<div class="ty-product-block__left">
<form action="http://beanbags.ambientlounge.com/" method="post" name="product_form_487" enctype="multipart/form-data" class="cm-disable-empty-files cm-ajax cm-ajax-full-render cm-ajax-status-middle cm-processed-form">
<input type="hidden" name="result_ids" value="cart_status*,wish_list*,checkout*,account_info*">
<input type="hidden" name="redirect_url" value="index.php?dispatch=products.view&product_id=487">
<input type="hidden" name="product_data[487][product_id]" value="487">
<h1 class="ty-product-block-title">Zen Lounger - Sakura Pink</h1>
<div class="ty-product-block__sku">
<div class="ty-control-group ty-sku-item cm-reload-487" id="sku_update_487">
<input type="hidden" name="appearance[show_sku]" value="1">
<label class="ty-control-group__label" id="sku_487">CODE:</label>
<span class="ty-control-group__item" id="product_code_487">5528</span>
<!--sku_update_487-->
</div>
</div>
<hr class="clear">
<div class="product-left">
<div class="prices-container price-wrap">
<div class="ty-product-prices">
<span class="cm-reload-487" id="old_price_update_487">
<!--old_price_update_487--></span>
<div class="ty-product-block__price-actual">
<span class="cm-reload-487 ty-price-update" id="price_update_487">
<input type="hidden" name="appearance[show_price_values]" value="1">
<input type="hidden" name="appearance[show_price]" value="1">
<span class="ty-price" id="line_discounted_price_487"><span class="ty-price-num">$</span><span id="sec_discounted_price_487" class="ty-price-num">149.00</span></span>
<!--price_update_487-->
</span>
</div>
<span class="cm-reload-487" id="line_discount_update_487">
<input type="hidden" name="appearance[show_price_values]" value="1">
<input type="hidden" name="appearance[show_list_discount]" value="1">
<!--line_discount_update_487--></span>
</div>
</div>
<div class="ty-product-block__option">
<div class="cm-reload-487" id="product_options_update_487">
<input type="hidden" name="appearance[show_product_options]" value="1">
<input type="hidden" name="appearance[details_page]" value="1">
<input type="hidden" name="additional_info[info_type]" value="D">
<input type="hidden" name="additional_info[get_icon]" value="1">
<input type="hidden" name="additional_info[get_detailed]" value="1">
<input type="hidden" name="additional_info[get_additional]" value="">
<input type="hidden" name="additional_info[get_options]" value="1">
<input type="hidden" name="additional_info[get_discounts]" value="1">
<input type="hidden" name="additional_info[get_features]" value="">
<input type="hidden" name="additional_info[get_extra]" value="">
<input type="hidden" name="additional_info[get_taxed_prices]" value="1">
<input type="hidden" name="additional_info[get_for_one_product]" value="1">
<input type="hidden" name="additional_info[detailed_params]" value="1">
<input type="hidden" name="additional_info[features_display_on]" value="C">
<div class="cm-picker-product-options ty-product-options" id="opt_487">
<div class="ty-control-group ty-product-options__item product-list-field clearfix" id="opt_487_365">
<label class="ty-control-group__label ty-product-options__item-label">Option:</label>
<ul id="option_487_365_group" class="ty-product-options__elem">
<li class="hidden">
<input type="hidden" name="product_data[487][product_options][365]" value="731" id="option_487_365">
</li>
<li>
<label id="option_description_487_365_731" class="ty-product-options__box option-items cover-only">
<input type="radio" class="radio" name="product_data[487][product_options][365]" value="731" checked="checked" onclick="fn_change_options('487', '487', '365');">Cover only
</label>
</li>
<li>
<label id="option_description_487_365_732" class="ty-product-options__box option-items with-filling">
<input type="radio" class="radio" name="product_data[487][product_options][365]" value="732" onclick="fn_change_options('487', '487', '365');">
</label>
</li>
</ul>
</div>
</div>
<!-- Inline script moved to the bottom of the page -->
<!--product_options_update_487-->
</div>
</div>
<div class="ty-product-block__advanced-option">
<div class="cm-reload-487" id="advanced_options_update_487">
<!--advanced_options_update_487-->
</div>
</div>
<div class="ty-product-block__field-group">
<div class="cm-reload-487 stock-wrap" id="product_amount_update_487">
<input type="hidden" name="appearance[show_product_amount]" value="1">
<div class="ty-control-group product-list-field">
<label class="ty-control-group__label">Availability:</label>
<span class="ty-qty-out-of-stock ty-control-group__item" id="out_of_stock_info_487">Out of stock</span>
</div>
<!--product_amount_update_487-->
</div>
<div class="cm-reload-487" id="qty_update_487">
<input type="hidden" name="appearance[show_qty]" value="">
<input type="hidden" name="appearance[capture_options_vs_qty]" value="">
<input type="hidden" name="product_data[487][amount]" value="1">
<!--qty_update_487-->
</div>
<div class="ty-product-block__button">
<div class="cm-reload-487 " id="add_to_cart_update_487">
<input type="hidden" name="appearance[show_add_to_cart]" value="1">
<input type="hidden" name="appearance[show_list_buttons]" value="1">
<input type="hidden" name="appearance[but_role]" value="big">
<input type="hidden" name="appearance[quick_view]" value="">
<div class="ty-control-group">
<label for="sw_product_notify_487" class="ty-strong">
<input id="sw_product_notify_487" type="checkbox" class="checkbox cm-switch-availability cm-switch-visibility" name="product_notify" onclick="if (!this.checked) {Tygh.$.ceAjax('request', 'http://beanbags.ambientlounge.com/index.php?dispatch=products.product_notifications&enable=' + 'N&product_id=487&email=' + $('#product_notify_email_487').get(0).value, {cache: false});}">Notify me when this product is back in stock</label>
</div>
<div class="ty-control-group ty-input-append ty-product-notify-email hidden" id="product_notify_487">
<input type="hidden" name="enable" value="Y">
<input type="hidden" name="product_id" value="487">
<label id="product_notify_email_label" for="product_notify_email_487" class="cm-required cm-email hidden">Email</label>
<input type="text" name="hint_email" id="product_notify_email_487" size="20" value="Enter e-mail address" class="ty-product-notify-email__input cm-hint" title="Enter e-mail address">
<button class="ty-btn-go cm-ajax" type="submit" name="dispatch[products.product_notifications]" title="Go"><i class="ty-btn-go__icon ty-icon-right-dir"></i>
</button>
</div>
<!--add_to_cart_update_487-->
</div>
</div>
</div>
<p class="clear filled-msg cover-only">* If you don't choose to add filling you will receive the cover only.</p>
<p class="clear filled-msg filled">* Comes pre-filled with microbeads</p>
</div>
<div class="product-right">
<div class="ty-product-block__note">
<p style="text-align: center;">
<img src="http://www.beanbags.com.au/images/ambient-lounge.jpg">
</p>
</div>
</div>
</form>
<div class="clear"></div>
<!-- Inline script moved to the bottom of the page -->
<div class="ty-tabs cm-j-tabs clearfix">
<ul class="ty-tabs__list">
<li id="description" class="ty-tabs__item cm-js active"><a class="ty-tabs__a">Description</a>
</li>
<li id="product_tab_11" class="ty-tabs__item cm-js"><a class="ty-tabs__a">Colour</a>
</li>
<li id="product_tab_10" class="ty-tabs__item cm-js"><a class="ty-tabs__a">Fabric</a>
</li>
<li id="features" class="ty-tabs__item cm-js"><a class="ty-tabs__a">Features</a>
</li>
</ul>
</div>
<div class="cm-tabs-content ty-tabs__content clearfix" id="tabs_content">
<div id="content_description" class="ty-wysiwyg-content content-description" style="display: block;">
<div>
<h2>Ambient Lounge Zen Lounger - Sakura Pink</h2>
<p>
Dive onto the big pink pad and it will hug your body with all the love and warmth of a big squishy teddy bear. You will fall in love with this super-soft square cushioned bean bag becasue of the difference in fabric and tactility. Quite simply, we use
premuim open weave fabrics that make you want to hug your Zen close to your skin on a cold winter's night. The design of the Zen is just so flexible and versatile - it doesnt take up lots of space in the house but yet you can sprawl out
full body to study or sit up straight to watch the TV. The natural colour scheme means it can go just about anywhere and look good. Use it as your reliable crashmat after a long day on your feet.
</p>
<p>1 bag of 300lt is enough <a href="https://www.beanbags.com.au/bean-bag-filling/300-litres-of-premium-microbead-filling.html"><u>Bean Filling</u></a> for the luxurious Conversion Lounger (290lt needed).</p>
</div>
</div>
<div id="content_product_tab_11" class="ty-wysiwyg-content content-product_tab_11" style="display: none;">
<div class="ty-wysiwyg-content">
<p>
Make your living room or playroom pop with this precious pink plus-size luxury lounger. Children love this friendly fresh color while adults love that it also carries a deep sense of sophistication. Our world-class designers chose this decadent pink because
of its versatility and ability to sit well in many types of interior settings.
</p>
</div>
</div>
<div id="content_product_tab_10" class="ty-wysiwyg-content content-product_tab_10" style="display: none;">
<div class="ty-wysiwyg-content">
<p>
Extremely soft and tactile on the surface and backed with TC to give it extra strength and body for hard wear and form. Super thick sofa weave to give you a lush seating experience.
</p>
<p>
40％ viscose, 60% polyester, 560g/m.
</p>
</div>
</div>
<div id="content_product_tab_9" class="ty-wysiwyg-content content-product_tab_9">
</div>
<div id="content_features" class="ty-wysiwyg-content content-features" style="display: none;">
<div class="ty-product-feature">
<span class="ty-product-feature__label">Manufacture:</span>
<div class="ty-product-feature__value">Ambient Lounge</div>
</div>
<div class="ty-product-feature">
<span class="ty-product-feature__label">Style:</span>
<div class="ty-product-feature__value">Zen Lounger</div>
</div>
<div class="ty-product-feature">
<span class="ty-product-feature__label">Type:</span>
<div class="ty-product-feature__value">Interiors</div>
</div>
</div>
<div id="content_discussion" class="ty-wysiwyg-content content-discussion">
</div>
</div>
</div>
</div>
</div>
答案 0 :(得分：3)
如果您有多个span元素，那么您可以通过它使用each loop，如下所示：
$('.ty-product-detail .product-left .stock-wrap span').each(function() {
if ($(this).hasClass('ty-qty-out-of-stock')) {
$(this).closest('.ty-product-block__option').hide();
}
});
答案 1 :(得分：0)
在“Parixit”的帮助下管理解决方案答案它让我朝着正确的方向发展，我清理了HTML，以便其他人可以更好地看到答案。
$(document).ready(function() {
$('.ty-product-detail .product-left .stock-wrap span').each(function() {
if ($(this).hasClass('ty-qty-out-of-stock')) {
$('.ty-product-detail').find('.ty-product-options').hide();
}
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="ty-product-block ty-product-detail">
<div class="product-left">
<div class="cm-picker-product-options ty-product-options" id="opt_487">
<div class="ty-control-group ty-product-options__item product-list-field clearfix" id="opt_487_365">
<label class="ty-control-group__label ty-product-options__item-label">Option:</label>
<ul id="option_487_365_group" class="ty-product-options__elem">
<li>
<label id="option_description_487_365_731" class="ty-product-options__box option-items cover-only">
<input type="radio" class="radio" name="product_data[487][product_options][365]" value="731" checked="checked" onclick="fn_change_options('487', '487', '365');">Cover only
</label>
</li>
</ul>
</div>
</div>
<div class="ty-product-block__field-group">
<div class="cm-reload-487 stock-wrap" id="product_amount_update_487">
<input type="hidden" name="appearance[show_product_amount]" value="1">
<div class="ty-control-group product-list-field">
<label class="ty-control-group__label">Availability:</label>
<span class="ty-qty-out-of-stock ty-control-group__item" id="out_of_stock_info_487">Out of stock</span>
</div>
<!--product_amount_update_487-->
</div>
</div>
</div>
</div>