jquery - 剥离跨度并放入输入

Question

这应该很简单 - 从h1标签中获取内容，剥离span标签并将剩余部分放入input标签中

我有这个 HTML：

<div id="contentArea">
    <h1><span>Course</span>Arrangementname<h1>
    <input type="hidden" id="arr1Form_Arrangement" name="arr1Form_Arrangement">
</div>

jQuery

var eventname = $('#contentArea h1').html();
eventname.find("span").remove();
var eventnametrim = eventname.html();
//alert(eventnametrim);
$( "input[name*='Form_Arrangement']" ).val( eventnametrim );

但什么也没发生 - 警报也是空的。我的萤火虫告诉我 "eventname.find is not a function"它是 jQuery 1.9.0

有人可以告诉我发生了什么吗？

Answer 1

如果所需的输出是Arrangementname那么问题出在第一行，应该是：

var eventname = $('#contentArea h1');

...因为这会eventname生成一个 jQuery 对象，您可以在该对象上.find()获取跨度并使用现有的第二行将其删除。虽然这实际上完全从页面中删除了 span 元素，但您可能希望这样做：

var eventname = $('#contentArea h1').clone();

...这样您就有一个不会影响页面上显示内容的工作副本。

下一个问题是您有一个名为的变量eventnametrim，然后您在代码的最后一行将其引用为$eventnametrim. $从后者中删除，以便名称匹配。

如果您试图获得 的输出CourseArrangementname，即忽略<span>and</span>标记但保留文本内容，您可以这样做：

var eventname = $('#contentArea h1').text();
$( "input[name*='Form_Arrangement']" ).val( eventname );

Answer 2

然后只需使用：

var eventname = $('#contentArea h1').text();
$( "input[name*='Form_Arrangement']" ).val( eventname );

使用.text()代替 .html()和 eventname 将包含没有 html 的文本；)

因为如果您删除跨度，那么您将删除标签及其内容（您想要的文本）

Answer 3

尝试使用text()而不是html()：

var eventname = $('#contentArea h1').text();
$( "input[name*='Form_Arrangement']" ).val( $.trim(eventname ));

工作演示

Answer 4

尝试：

var eventname = $('#contentArea h1');

我相信，html 不是一个 jQuery 对象，这是正在发生的事情。

Answer 5

我在控制台中遇到错误。尝试这样的事情：http: //jsfiddle.net/GmzXG/

$('#contentArea h1').find("span").remove();
var eventname = $('#contentArea h1').html();

//alert(eventnametrim);
$( "input[name*='Form_Arrangement']" ).val( eventname );