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 - 获取当前元素的跨度值

回答

相关问题