Question

jquery如何用$(this)选择他下面的子元素

我想知道 如何选择下面的子元素 看下例子<div id="ul"> <ul>     <li>         <dl><dt>第一个</dt><dd>呆呆地</dd><dd>呆呆地</dd><dd>呆呆地</dd><dd>呆呆地</dd><dd>呆呆地</dd><dd>呆呆地</dd></dl>        </li>        <li>         <dl><dt>第一个</dt><dd>呆呆地</dd><dd>呆呆地</dd><dd>呆呆地</dd><dd>呆呆地</dd><dd>呆呆地</dd><dd>呆呆地</dd></dl>        </li>        <li>         <dl><dt>第一个</dt><dd>呆呆地</dd><dd>呆呆地</dd><dd>呆呆地</dd><dd>呆呆地</dd><dd>呆呆地</dd><dd>呆呆地</dd></dl>        </li>        <li>         <dl><dt>第一个</dt><dd>呆呆地</dd><dd>呆呆地</dd><dd>呆呆地</dd><dd>呆呆地</dd><dd>呆呆地</dd><dd>呆呆地</dd></dl>        </li>    </ul></div> <style> #ul ul li {} #ul ul li dd {float:left;width:100px;height:20px;display:none;} #ul ul li dt {width:100px;height:20px;}</style>$(function(){var liname = $("#ul li");li.mousemove(function(){$(this).?????})})主要我想用鼠标移动到li上面 他下面的子元素 也就是 DD元素能显示出来$(this)能否使用？如果不能使用能否提供个思路 或者设计方式

Answer 1

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

1、首先，打开html编辑器，新建html文件，例如：index.html，并引入jquery，编写问题基础代码。

2、在index.html中的<script>标签，输入jquery代码：

$('li').hover(function () {

$(this).find('dd').css('display', 'inline');

});

3、浏览器运行index.html页面，此时当鼠标移动到li上时，它的字元素dd通过$(this)的方式获取被显示了出来。

Answer 2

实现方法：使用遍历函数children()，关键代码为 $(this).children("li")，表示获取当前元素下所有标签为<li>的子元素。

下面实例演示：点击div标签后，何用$(this)选择它下面的<li>子元素，为了显示效果，将其设置为红色。

1、新建HTML文件，输入如下的HTML结构，为了说明问题，在div标签下除了li元素外，还设置了其他类型的子元素。

<div id="test">

    <span>我是span标签</span><br>

    <li>我是li标签</li>

    <a href="#">我是超链接a标签</a>

</div>

2、在上面新建文件的开头输入如下jquery代码，表示在单击div标签区域后，执行一个函数，具体动作为获取当前div下的li标签元素，然后使用css()函数设置它的字体颜色为红色。

<script>

$(function(){

    $("#test").click(function() {    // 单击div元素

        $(this).children('li').css('color','red');    // 使用children('li')获取div下的li元素，然后设置颜色为red即红色

    });

}); 

</script>

3、保存文件，使用浏览器打开，演示效果如下图所示，从结果可知，只有div下的li子元素被选中。

Answer 3

$(this).Children("dd")//这样就选择了当前鼠标下的dd元素啦。children选中子孙元素，parent选中父元素，parents选中祖先元素