js怎么获取<span class="name">名字<span>中的内容:名字

js怎么获取<span class="name">名字<span>中的内容:名字,第1张

思路:根据标签名称获取所有span对象,然后根据类名筛选出目标对象,最后使用 innerHTML 属性获取文本。实例演示如下:

1、HTML结构

<span class="xing">姓氏</span>

<span class="name">名字</span>

<span class="sheng">籍贯</span> <br>

<input type='button' value='获取class=name的span' onClick="fun()"/>

2、javascript代码

function fun(){

obj = documentgetElementsByTagName("span");

class_name = "name";

for(i in obj){

if(obj[i]className == class_name){

alert(obj[i]innerHTML);

return

}

}

}

3、效果演示

return '<span style="color:red;">数据未采</span> | <span id="spanid" style="color:green;">已采照片'+ rowphotoNum + '张</span>';

documentgetElementsByTagName('span')

获取到的是一个数组,但是这样子直接获取标签名不太好,

建议你在你需要用到的span上增加同名的类,通过类名来获取,避免获取到其他不相关的span

<!doctype html>

<!DOCTYPE html>

<html>

<head>

<title></title>

</head>

<body>

<li>

<div class="vt-el-inner">

<div class="inner-logo">

<img src="/PPIMG/001jpg">

</div>

<div class="inner-title"><span>1</span>马格全屋定制</div>

<div class="inner-btn">

<div class="vote-count fl">7899票</div>

<button class="vote-send fr" onclick="asd(this)">投TA一票</button>

</div>

</div>

</li>

<li>

<div class="vt-el-inner">

<div class="inner-logo">

<img src="/PPIMG/002jpg">

</div>

<div class="inner-title"><span>2</span>马格全屋定制</div>

<div class="inner-btn">

<div class="vote-count fl">789票</div>

<button class="vote-send fr" onclick="asd(this)">投ta一票</button>

</div>

</div>

</li>

<script type="text/javascript" src="jquery-321js"></script>

<script type="text/javascript">

function asd(obj){

var ret = $(obj)parent()siblings("inner-title")find("span")html();

consolelog(ret)

}

</script>

</body>

</html>

需要引入jquery

不知道楼主是要获得span里的什么东西, 你的span里是一个<a>标签元素啊

不知道是不是这个意思

var span = $('#like_5920');

alert($(span)find('a')text());

输出: 喜欢(1)

以上就是关于js怎么获取<span class="name">名字</span>中的内容:名字全部的内容,包括:js怎么获取<span class="name">名字</span>中的内容:名字、js获取值,动态添加到span标签中、js怎么获取多个span等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/web/10152477.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-05
下一篇 2023-05-05

发表评论

登录后才能评论

评论列表(0条)

保存