jquery如何获取span元素内的文本框值答案

【问题标题】：jquery how to get textbox value inside span elementjquery如何获取span元素内的文本框值
【发布时间】：2011-07-09 08:05:30
【问题描述】：

我想使用 jquery 获取 span 元素内 textfield（只有一个）的值，但不能。

<span>simple span text
<a class="remove" href="javascript:" title="Remove">x</a>
<input type="hidden" name="word[ids][]" value="this is text">
</span>

Jquery 代码关联到 remove class 的锚标记

$(".remove").live("click", function(){

alert ($(this).parent().('input:text').val()); // return undefined

//i just coded below to check whether span itself is getting or not
alert ($(this).parent().attr('tag')); // this also return undefined 

if ($(this).parent().is('span'));
alert("parent is span"); // only this works 

});

【问题讨论】：

哎呀....误解了这个问题，nvm。

标签： jquery textfield html

【解决方案1】：

如果input 总是remove 元素的下一个兄弟元素，那么这将起作用：

$(".remove").live("click", function(){
    var value = $(this).next().val();
});

解释为什么您的代码不起作用：

$(this).parent().('input:text').val() 这一行在语法和逻辑上都是错误的。

如果你想在另一个元素中找到一个元素，你必须使用find ^[docs]：

$(this).parent().find('input:text').val()

这仍然不会给你价值，因为你有一个 hidden input 元素。如果您查看:text ^[docs] documentation，您会看到此选择器因此没有选择那些。所以要么使用'input'，要么使用:hidden ^[docs]：'input:hidden'。

.attr('tag') 根本不起作用，因为 HTML 元素没有属性 tag。您可以使用 nodeName 属性从 DOM 元素中获取标签名称：

$(this).parent()[0].nodeName

【讨论】：

问题要求隐藏输入，而不是文本框
@Edgar: next() 不关心它是什么类型的元素。另一部分实际上只是指出语法错误，但也许我应该再澄清一点......
@Felix Kling 这是其他答案中最简单的一个。甚至无需担心输入类型是文本还是隐藏。感谢您提供更多信息。

【解决方案2】：

这样做：

 $(".remove").live("click", function() {
    //alert($(this).parent().attr('tagName')); //return the tagName
    alert($(this).parent().find('input').val()); //this works
});

在这里测试http://jsfiddle.net/zhiyelee/29bgX/

【讨论】：

【解决方案3】：

试试这个：

$(".remove").live("click", function() {
    alert ($(this).parent().find("input").val());
});

【讨论】：

【解决方案4】：

这不起作用：

$(this).parent().('input:text').val()

相反，您需要使用find 函数。另一个问题是您正在寻找文本输入，但您的输入是hidden 类型：

$(this).parent().find('input:hidden').val()

另外，无论父级是否为span，您的最终alert 将始终收到提醒，因为您的if 语句末尾有一个分号。

【讨论】：

感谢您提供有关隐藏字段和分号错误的线索，我本来可以这样想的。您的代码也可以工作。

【解决方案5】：

有了这个：

$(".remove").live("click", function() {
    alert ($(this).closest("span").find("input[type='hidden']").val());
});

这将在最接近的span 前任中找到，因此对 HTML 代码更改将更加灵活。

希望这会有所帮助。干杯

【讨论】：

@Edgar 虽然我坚持使用 Felix Kling 的代码，但我会记下您的灵活性问题。

【解决方案6】：

$('.remove').live('click',
function() {
    console.log($(this).next('input:hidden').val());
});

【讨论】：