无法使用JavaScript选择最接近的h2元素 [英] Unable to select closest h2 element using JavaScript

问题描述

我希望能够选择最接近包含披萨选择选项的字段集的h2标题，并使用jQuery设置标题的文本。到目前为止我一直无法做到。

I would like to be able to select the closest h2 heading to the fieldset that contains the pizza selection options and set the text for the heading using jQuery. I have so far been unable to do it.

HTML：

   <div id="pizzaForm">
        <fieldset>
            <form class="pure-form">
            <legend>Pizza</legend>
            <label><b>Pizza Type: &nbsp;</b></label>
            <select id="pizza">
                <option name="margarita">Margarita</option>
                <option name="deep-pan">Deep Pan</option>
                <option name="stuffed-crust">Stuffed Crust</option>
            </select>
                <span style="float:right">
                <label><b>Pizza Size: &nbsp;</b></label>
                <select id="pizzaSize">
                    <option name="e-small" data-price="4.99">Extra Small - £4.99</option>
                    <option name="small" data-price="5.99">Small - £5.99</option>
                    <option name="medium" data-price="6.99">Medium - £6.99</option>
                    <option name="large" data-price="8.99">Large - £8.99</option>
                    <option name="e-large" data-price="9.99">Extra Large - £9.99</option>
                    <option name="f-size" data-price="10.99">Family Size - £10.99</option>
                </select>
                </span>
            </form>
        </fieldset>
        <fieldset style = "border-top:0px">
        <form class="pure-form">
        <legend><b>Toppings (99p Each): &nbsp;</b></legend>
        <input type="checkbox" name="onions">Onions</input>
        <input type="checkbox" name="mushrooms">Mushrooms</input>
        <input type="checkbox" name="peppers" >Peppers</input>
        <input type="checkbox" name="olives" >Olives</input>
        <input type="checkbox" name="garlic" >Garlic</input>
        <input type="checkbox" name="peperoni" >Peperoni</input>
        <input type="checkbox" name="cheese" >Pesto</input>
        </form>
        </fieldset>
        <h2 id="cost" style= "float:left; margin-top:-3cm; margin-left: 9cm; border: solid black 2px; padding: 5px"> TEST </h2>
        <br>
    </div>

JS：

$(document).on("change","#pizzaSize", function() {
    $("input[type='checkbox']").prop('disabled', false);
    var selectionPrice = $('option:selected', this).attr('data-price');
    var selectionInt = parseFloat(selectionPrice, 10);
    pizzaCost = selectionInt;
    $(this).closest('h2').text(pizzaCost);
    calculateCost(pizzaCost, toppingCost, sideCost, drinkCost, desertCost, desertSizeCost, drinkSizeCost, sideSizeCost);
});

推荐答案

nearest（）仅用于获取控件的fieldset。如果您知道h2位于同一级别的字段集之后，您可以执行以下操作：

closest() does only work to get the fieldset for your control. If you know that the h2 comes after the fieldset on the same level, you could do:

$(this).closest('fieldset').nextAll('h2').first();

但这取决于你对'最近'的意思。您可能希望查看jQuery 树遍历函数。

But it depends on what you mean with 'closest'. You might want to have a look at the jQuery tree traversal functions.

这篇关于无法使用JavaScript选择最接近的h2元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！