jquery点击事件获取另一个标签的值

你这个a不是在span里面吗，在绑定的事件里直接使用 $(this)parent()就可以获取到包裹它的span了。append之后，就会生成以下dom结构，然后在事件绑定取父元素就好了。

片段1

<span data-musicicon="name1" class="music-icon-hook"><a href="#" title="播放" data-action="play" class="list-micon icon-play"></a></span>

<!-- more -->

<span data-musicicon="name10" class="music-icon-hook"><a href="#" title="播放" data-action="play" class="list-micon icon-play"></a></span>

<script>

代码

<div id="div1"></div>

<script>

$(function(){

// 模拟的数据。

var musicList=[{MusicName:'name1'},{MusicName:'name2'},{MusicName:'name3'},{MusicName:'name4'},{MusicName:'name5'},{MusicName:'name6'},{MusicName:'name7'},{MusicName:'name8'},{MusicName:'name9'},{MusicName:'name10'}];

// 以下代码会生成 片段1 的dom

for (i = 0; i < musicListlength; i++) {

$("#div1")append('<span data-musicicon="'+musicList[i]MusicName +'" class="music-icon-hook"> <a href="#" title="播放" data-action="play" class="list-micon icon-play"> play </a></span>');

}

$('list-micon')each(function(index){

$(this)click(function(){

var span=$(this)parent(); // 获取到a的父元素，即包含它的那个span

alert(spanattr('data-musicicon'));

// 可以对span进行 *** 作了

});

});

});

</script>

<span class="se" onClick="gc(this)">sef</span>

貌似不用JQUERY更方便吧

function gc(obj){

alert(objclassName);

}

如果一定要用JQ的话

function gc(obj){

var css = $(obj)attr("class");

alert(css);

}

兄弟，下次要是发此类问题的话可能贴 下代码，比如SPAN的

有两种方法可以实现获取span下第一个i标签：

1、使用css选择器： first-child 或nth-child(1)，具体代码为：$("spanlabel i:first-child") 或  $("spanlabel i:nth-child(1)")

2、使用遍历方法：first()、eq()等，具体代码为：

$("spanlabel")each(function() {

$(this)find("i:eq(0)")   // 或者$(this)find("i")first()

});

下面进行实例演示：为所有span的第一个i标签的元素都添加红色样式：

1、新建一个HTML文件，为了演示需要假设如下的HTML结构：

<div id="test">

    <span class='label'><i>1-1</i>&nbsp;&nbsp;<i>1-2</i></span><br>

    <span class='label'><i>2-1</i>&nbsp;&nbsp;<i>2-2</i></span><br>

    <span class='label'><i>3-1</i>&nbsp;&nbsp;<i>3-2</i></span>

</div>

<input type="button" id="btn" value="设置">

2、在上面新建文件的开头部分添加如下jquery代码：主要逻辑为在点击按钮时相应一个 *** 作，即获取span下第一个i标签（下面注释部分给出了4种方法都是可行的，可以根据需要进行选择）。为了演示效果，使用addClass()函数为获取到的span下第一个i标签添加红色的样式。

<script>

$(function(){

    $("#btn")click(function() { // 点击按钮就相应下面的 *** 作

        // $("spanlabel i:first-child")addClass('red'); // 方法1，使用first-child选择器

        // $("spanlabel i:nth-child(1)")addClass('red');  // 方法2，使用nth-child(1)选择器

        $("spanlabel")each(function() {

            // $(this)find("i:eq(0)")addClass('red');   // 方法3，遍历后使用eq()方法

            $(this)find("i")first()addClass('red');      // 方法4，遍历后使用first()方法

        });

    });

});

</script>

3、保存文件，使用浏览器打开，点击按钮后效果如下：

需要准备的材料分别有：电脑、html编辑器、浏览器。

1、首先，打开html编辑器，新建html文件，例如：indexhtml，并引入jquery。

2、在indexhtml中的<script>标签，输入jquery代码：$('body')append($('a')attr('id'));。

3、浏览器运行indexhtml页面，此时成功获取到了a标签的id值。

包括我自己在内（其实我也就这两天才知道这样可以快速获取的），很多jQuery的使用者都对这一问题深感疑惑。为什么在众多方便的各种获取属性和设置属性的方法中就不能像DOM中一样直接设置html元素的outerHTML呢？ 原生DOM中获取和设置html元素的outerHTML大家都很熟悉： // 原生DOM获取outerHTML alert('原生DOM获取outerHTML'); alert(documentgetElementById('lz66303')outerHTML); // 原生DOM设置outerHTML alert('原生DOM设置outerHTML'); documentgetElementById('lz66303')outerHTML = '<textarea id="lz66303"><hr>原生DOM设置outerHTML</textarea>'; 当然在jQuery中我们可以用prop()方法来获取和设置html元素的outerHTML，在网上若搜索jQuery获取outerHTML竟然还有人写出函数来了，可悲！——jQuery自带的方法不知还自以为自己写个函数这种方法是什么好的解决方案。 当你看到本文时，请转给更多还在用自定义函数获取outerHTML的jQuery使用者——我这个经验就没白分享了！ 其实就这么简单： // 成功获取到 alert('jQueryprop()获取outerHTML'); alert($('textarea')prop('outerHTML')); // 成功设置，已生效 alert('jQueryprop()设置outerHTML'); $('textarea')prop('outerHTML', '<input>');

1、JQuery的核心的一些方法

each(callback) '就像循环

$("Element")length; ‘元素的个数，是个属性

$("Element")size(); '也是元素的个数，不过带括号是个方法

$("Element")get(); ‘某个元素在页面中的集合，以数组的形式存储

$("Element")get(index); '功能和上面的相同，index表示第几个元素，数组的下标

$("Element")get()reverse(); ‘把得到的数组方向

$("Element1")index($("Element2")); '元素2在元素1中的索引值是。

2、基本对象获取(注意这里获取的都是Jquery对象而不是Dom对象哦，但是他俩是可以转换滴)

$("") ‘表示获取所有对象 但是我至今没这样用过

$("#XXX") '获得 id=XXX 的元素对象（id可以是标签的id或CSS样式id） 常用

$("input[name='username']") 获得input标签中name='userName'的元素对象 常用

$("abc") ' 获得样式class的名字是abc的元素对象 常用

$("div") ' 标签选择器 选择所有的div元素 常用

$("#a,b,span") '表示获得ID是a的元素和使用了类样式b的元素以及所有的span元素

$("#a b p") 'ID号是a的并且使用了 b样式的 所有的p元素

3、层级元素获取

$("Element1 Element2 Element3 ") '前面父级 后面是子集

$("div > p") '获取div下面的所有的 p元素

$("div + p") 'div元素后面的第一个 p元素

$("div ~ p") 'div后面的所有的 p元素

4、简单对象获取

$("Element:first") 'HTML页面中某类元素的第一个元素

$("Element:last") 'HTML页面中某类元素的最后一个元素

$("Element:not(selector)") '去除所有与给定选择器匹配的元素,如：$("input:not(:checked)") 表示选择所有没有选中的复选框

$("Element:even") '获得偶数行

$("Element:odd“）'获得奇数行

$("Element:eq(index)") '取得一个给定的索引值

$("Element:gt(index)") '取得给定索引值的元素 之后的所有元素

$("Element:lt(index)") '取得给定索引值的元素 之前的所有元素

5、内容对象的获取和对象可见性

$("Element:contains(text)") '元素中是否包含text文本内容

$('Element:empty") '获得元素不包含子元素或文本的

$("Element:partnt") '获得元素包含子元素或文本的

$("Element:has(selector)") ‘是否包含某个元素， 如：$("p:has(span)")表示所有包含span元素的p元素

$("Element:hidden") '选择所有可见元素

$("Element:visible") '选择所有不可见元素

6、其他对象获取方法

$("Element[id]") '所有带有ID属性的元素

$("Element[attribute = youlika ]" '获得所有某个属性为youlika的元素

$("Element[attribute != youlika ]" '获得所有某个属性为不是youlika的元素

$("Element[attribute ^= youlika ]" '获得所有某个属性为不是youlika的开头的元素

$("Element[attribute $= youlika ]" '获得所有某个属性为不是youlika的结尾的元素

$("Element[attribute = youlika ]" '获得所有某个属性包含youlika的开头的元素

$("Element[selector1][selector2][]") '符合属性选择器，比如$("input[id][name][value=youlika ]")表示获得带有ID、Name以及value是youlika 的input元素。

7、子元素的获取

$("Element:nth-child(index)") '选择父级下面的第n个元素

$("Element:nth-child(even)") '选择父级下面的偶数

$("Element:nth-child(odd)") '选择父级下面的奇数

$("Element:nth-child(3n+1)") '表达式

$("Element:first-child") '选择父级下面的第一个子元素

$("Element:last-child") '选择父级下面的最后一个子元素

$("Element:only-child") '匹配父级下的唯一的一个子级元素，例如dt在dl列表中唯一，那么将选择dt

8、表单对象获取

$(:input)//查找所有的Input元素，当然也包括下拉列表，文本域，单选框，复选框等。

$(:text)//匹配所有的单行文本框

$(:password)//匹配所有的密码框

$(:radio)//匹配所有的单选按钮

$(:checkbox)//匹配所有的复选框

$(:submit)//匹配所有的提交按钮

$(:image)//匹配所有的图像域，例如

$(:reset)//匹配所有的重置按钮

$(:button)//匹配所有的按钮

$(:file)//匹配所有的文件上传域

$(:hidden)//匹配所有的不可见元素或者type为hidden的元素

$(:enabled)//匹配所有可用的input元素，比如radio:enabled表示匹配所有可用的单选按钮

$(:disabled)//匹配所有的不可用input元素，作用与上相反

$(:checked)//匹配所有选中的复选框元素

$(:selected)//匹配所有的下拉列表

9、元素属性的设置与移除

$("Element")attr(name) '取得第一个匹配的属性值，比如$("img")attr("src")

$("Element"attr(key,value)") '某一个元素设置属性

$("Element"attr({key:value,key1:value,})) ‘为某个元素一次性设置多个属性

$("Element")attr(key,function) '为所有匹配的元素设置一个计算的属性值。

$("Element")removeAttr(name)//移除某一个属性

以上就是关于jquery点击事件获取另一个标签的值全部的内容，包括:jquery点击事件获取另一个标签的值、jquery 中 得到 span 标签中的class值。、jquery 怎么获取span下第一个i标签等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！