从兄弟元素中寻找文本

时间:2013-09-03 11:55:06

标签: javascript jquery html

我已经动态生成了我想要与JQuery一起使用的HTML表。看起来有点像这样,只有更多的<tr>元素。

<table>
  <tr>
    <td class="name"> Apples </td>
    <td class="value"> 2.33 </td>
    <td class="amount"> <input type="text"></td>
  </tr>
</table>

我正在编写的脚本将采用文本输入字段中的任何内容,将其乘以值td中指定的float并输出。但是,我在使用JQuery进行<td>时遇到了问题。

我试过像

这样的东西
parseFloat($(".amount input").parent().siblings($("td.value")).text())

获取值,但它不起作用 - 它似乎试图将它乘以每个元素而不管类。我尝试了<tr>,其中唯一的数据是整数......

2013-8-28 | 2.1 | 20

......它吐了4026.我不知道为什么。

所以,问题仍然存在:如何从同一<td>上的value开始,从input获取<tr>的内容?

10 个答案:

答案 0 :(得分:2)

试试这个:

$(document).ready(function(){
    $('input').on('blur', function(){
       alert($(this).val() * $(this).parent().siblings('.value').text()); 
    });
})

答案 1 :(得分:0)

怎么样

$(".amount").parent().find('.value').text();

答案 2 :(得分:0)

尝试

HTML

<table>
  <tr>
    <td id="val1" class="name"> Apples </td>
    <td id="val2" class="value"> 2.33 </td>
    <td class="amount"> <input type="text"></td>
  </tr>
</table>

的JavaScript

function getvalue()
{
  var name = (document.getElementById('val1').innerText || document.getElementById('val1').textContent);

  var value = parseFloat(document.getElementById('val2').innerText || document.getElementById('val1').textContent);   
}

答案 3 :(得分:0)

你可以尝试

$('.amount').each(function(){
    var $this = $(this), amount = parseFloat($this.find('input').val()) || 0, rate = parseFloat($this.prev().text()) || 0;
    console.log(amount * rate)
})

答案 4 :(得分:0)

更改

.siblings($("td.value"))

.siblings('td.value')

DEMO

答案 5 :(得分:0)

这也应该有用

$('input').on('blur', function(){
   alert($(this).val() * $(this).parent().siblings('.value').text()); 
});

工作fiddle here

答案 6 :(得分:0)

siblings()功能中的选择器错误。试试这个:

parseFloat($(".amount input").parent().siblings(".value").text())

Example fiddle

答案 7 :(得分:0)

使用:

$('input').on('blur', function(){
   var value = $(this).closest("tr").siblings(".value").text(); 
});

答案 8 :(得分:0)

有很多选择:

$(".amount input").parent().prev("td.value").text() //good to use

$(".amount input").parent().siblings("td.value").text()

$(".amount input").parent().parent().find("td.value").text()

完整的工作演示

<强> FIDDLE DEMO

答案 9 :(得分:0)

我已经完成了你想要的keyup事件,FIDDLE

    jQuery(function(){
        $('.amount input').keyup(function(){
            var input_value = this.value;
            var values = $(this).parent().prev().text();
            alert(input_value * values);
        })
    })