JavaScript/jQuery - 獲取當前元素的跨度值

因此，我有一些<select>元素，並且它的每個可能選項都有一個跨度內的價格。我循環遍歷所有選擇標記，我需要爲每個選項獲取所選選項的跨度值。所以這是我的代碼JavaScript/jQuery - 獲取當前元素的跨度值

<select class="form-control config-option" id="s{{ $availableCategory->index}}"> 
    <option>{{ $availableCategory->default_option }}</option> 
    @foreach($availableOptions as $availableOption) 
      @if($availableOption->category->name == $availableCategory->name) 
       <option>({{ $availableOption->code }}) {{ $availableOption->name }} <span class="option-price">({{ $currency == 'EUR' ? 'EUR' : 'USD'}} {{ $availableOption->price }})</span></option> 
      @endif 
    @endforeach 
</select>

我試圖通過jQuery的find()功能按類別和標籤名稱來訪問它，但我不這樣做。

$('.config-option').each(function() { 
    var currentElement = $(this); 
    var optionPrice = currentElement.find('.option-price'); 
    console.log(optionPrice); 
});

如果我控制檯日誌optionPrice.val()我得到未定義。那麼我怎樣才能訪問這個跨度？有沒有更好的方法來做到這一點？使用普通JavaScript的解決方案也可以。

來源

2016-05-13 Codearts

[獲取跨度文本值]的可能的複製（HTTP：/ /stackoverflow.com/questions/10343838/get-value-of-span-text） – thatOneGuy

你不該」 t放置選項標籤內的標籤，說試試這個

$('.config-option').each(function() { 
    var currentElement = $(this); 
    var optionPrice = currentElement.find('.option-price').parent().text(); 
    console.log(optionPrice); 
});

更新：span標籤獲得通過瀏覽器中刪除，以便使用該標記結構

<select> 
    <option data-price="PRICE_HERE">

然後在JS使用

$('.config-option option:selected').each(function() { 
    var optionPrice = $(this).attr('data-price'); 
    console.log(optionPrice); 
});

來源

2016-05-13 13:01:59

是的，我剛剛注意到，當我在瀏覽器中檢查時，它們被刪除。 – Codearts

你可以給選項一個類。看到更新的答案。 –

這不會像currentElement.val（）那樣產生相同的結果。？ – Codearts

跨度不具有價值屬性（只輸入有），所以你需要從跨度

 $('.config-option').each(function() { 
     var currentElement = $(this); 
     var optionPrice = currentElement.find('.option-price').text(); 
     console.log(optionPrice); 
    });

得到的.text（），但你爲什麼不只是遍歷和撿.option價格具體是？

$('.option-price').each(function() { 
    var optionPrice = $(this).text(); 
    console.log(optionPrice); 
});

來源

2016-05-13 12:51:24 gavgrif

我剛試過，我得到一個空字符串，即使它裏面有價格。 – Codearts

optionPrice.val()是針對input的字段。您需要撥打optionPrice.text()而不是此。

試一下這個

console.log(optionPrice.text());

來源

2016-05-13 12:54:55

我試過了，我得到一個空字符串。 – Codearts

可能是你的'span'沒有任何數據。 –

'console.log（optionPrice）;'？的結果是什麼？ –

你能增加價值來選擇框中的選項，那麼你會很容易得到的值作爲

<select class="form-control config-option" id="s{{ $availableCategory->index}}"> 
    <option>{{ $availableCategory->default_option }}</option> 
    @foreach($availableOptions as $availableOption) 
     @if($availableOption->category->name == $availableCategory->name) 
      <option value="({{ $currency == 'EUR' ? 'EUR' : 'USD'}} {{ $availableOption->price }})">({{ $availableOption->code }}) {{ $availableOption->name }} <span class="option-price">({{ $currency == 'EUR' ? 'EUR' : 'USD'}} {{ $availableOption->price }})</span></option> 
     @endif 
    @endforeach 
</select>

腳本

$('.config-option').each(function() { 
    var currentElement = $(this); 
    // Now you will be able to use val() function 
    var optionPrice = currentElement.find('.option-price').val(); 
    console.log(optionPrice); 
});

來源

2016-05-13 12:57:34

JavaScript/jQuery - 獲取當前元素的跨度值

回答

相關問題