最接近的 li 无跨度

Closest li without span

提问人：Grasper 提问时间：8/14/2014 最后编辑：HuangismGrasper 更新时间：8/15/2014 访问量：380

问：

我正在尝试创建一个选择器来抓取元素并显示文本。问题是在标签内我有标签，并且也显示出来。lilispan

如何在没有某些元素的情况下抓取最接近元素的文本？

看到这里，我不希望包含“编辑”一词。http://jsfiddle.net/ozyf87tb/

<li>This is the story of the Jungle book
<form action="" method="" class="form_edit">
<textarea class="inte" value="" name="inte"></textarea>
</form>
<span class="edit">Edit</span>
</li>

$(".edit").click( function(ev) {
var a = $(this).closest('li').text();
$('.inte').val(a);
});
JavaScript jQuery HTML 最接近

评论

答：

3赞 Tacos 8/14/2014 #1

要执行要执行的操作，最易读的方法是用 之类的容器将文本括起来。因此，您可以使用其类选择确切的容器：DEMO<span class='myText'></span>

<li><span class='myText'>This is the story of the Jungle book</span>
<form action="" method="" class="form_edit">
<textarea class="inte" value="" name="inte"></textarea>
</form>
<span class="edit">Edit</span>
</li>

$(".edit").click( function(ev) {
var a = $(this).prevAll('.myText').text();
$('.inte').val(a);
});

评论

0赞 Grasper 8/14/2014
对不起，我无法修改html
2赞 George 8/14/2014 #2

使用并筛选您的选择以仅返回文本节点。然后，您需要做的就是修剪任何空格：contents()

var a = $.trim($(this).closest('li').contents().filter(function(){
    return this.nodeType == 3;  
}).text());

JSFiddle

文档

评论

0赞 singe3 8/14/2014
太静态了，你不使用给定的类
0赞 George 8/14/2014
解释“太静态”？没有必要使用类，因为我提供的代码片段会在上下文中。
0赞 Grasper 8/14/2014
数字 3 是什么？
0赞 George 8/14/2014
这意味着该节点是文本节点。请参阅 MDN
1赞 George 8/14/2014
顾名思义，@singe31不是节点的位置，而是节点的类型。nodeType
3赞 filoxo 8/14/2014 #3

首先，获取 html 的 clone（）。

var a = $(this).closest('li').clone();

然后删除无关的跨度。

a.find('span').remove();

然后将其放入文本区域。

$('.inte').val( a.text() );

这也可以重写为单个字符串，但会降低可读性。

var a = $(this).closest('li').clone().find('span').remove().end().text();
$('.inte').val( a );

jsfiddle

评论

0赞 Grasper 8/14/2014
为什么先克隆李？
1赞 filoxo 8/14/2014
.clone()创建您选择的 DOM 元素的副本，以便您可以在不实际引用页面元素的情况下使用它。否则，您将删除页面上显示的跨度。
5赞 Top Questions 8/14/2014 #4

http://jsfiddle.net/ozyf87tb/7/

克隆它（这样你就可以使用克隆，而不是在 DOM 中），获取子项，删除子项，获取文本。

$(".edit").click( function(ev) {

 var a = $(this).closest('li').clone().children().remove().end().text();

$('.inte').val(a);
});

评论

0赞 Grasper 8/14/2014
我最喜欢这个，为什么它被否决了？

上一个：jQuery 多个选择显示/隐藏

下一个：在 Visual Studio 的编辑器中显示空格、制表符、CRLF 字符