JavaScript/jQuery - 获取当前元素的跨度值答案

【问题标题】：JavaScript/jQuery - Get value of span of current elementJavaScript/jQuery - 获取当前元素的跨度值
【发布时间】：2016-05-13 12:49:14
【问题描述】：

所以我有一些<select> 元素，它的每个可能选项都有一个跨度内的价格。我遍历所有选择标签，我需要为每个标签获取所选选项的跨度值。所以这是我的代码

 <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 的解决方案也可以。

【问题讨论】：

Get value of Span Text的可能重复

标签： javascript jquery html

【解决方案1】：

你不应该把标签放在选项标签里面，说试试这个

$('.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); 
});

【讨论】：

是的，我刚刚注意到当我在浏览器中检查时它们被删除了。
你可以给选项一个类。查看更新的答案。
这不会像 currentElement.val(); 那样产生相同的结果吗？ ?
这只会给你选择的选项。
我刚刚测试了它，它完全按照我想要的方式工作！我完全忘记了我可以在我的选项标签中添加一个自定义属性。谢谢！

【解决方案2】：

optionPrice.val() 用于input 字段。

您需要调用optionPrice.text() 而不是这个。

试试这个

console.log(optionPrice.text());

【讨论】：

可能是你的span 没有任何数据。
console.log(optionPrice); 的结果是什么？
我注意到它是空的，因为当我检查选项标签中的跨度标签时消失了。
那么我认为你的条件@if($availableOption->category->name == $availableCategory->name) 永远不会满足。

【解决方案3】：

span 没有 value 属性（只有输入有）所以你需要从 span 中获取 .text()

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

但是您为什么不直接循环并获取具体的 .option-price 呢？

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

【讨论】：

我刚试了一下，我得到一个空字符串，即使里面有价格。

【解决方案4】：

你可以为选择框的选项添加值，那么你将很容易得到值

<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);
});

【讨论】：