获取当前点击的 li 下的div里面的内容

获取当前点击的 li 下的div里面的内容,第1张

是这样的吗?用了一个HTML5的选择器--nth-child(用法的话建议你自己去查下,我说的不是很准确),具体代码如下:

<!DOCTYPE html>

<html lang="en" xmlns=">

<li class="pro_off">

            <div class="offers_money"><span>20</span>元</div>

            <div class="offers_moneys">满200可用</div>

            <div id="offers_id" style="display: none;">12</div>

        </li>

<li class="pro_off">

            <div class="offers_money"><span>20</span>元</div>

            <div class="offers_moneys">满200可用</div>

            <div id="Div1" style="display: none;">15</div>

        </li>

<li class="pro_off">

            <div class="offers_money"><span>20</span>元</div>

            <div class="offers_moneys">满200可用</div>

            <div id="Div2" style="display: none;">17</div>

        </li>

    </ul>

</body>

</html>

<script src="TravelCompany/js/jquery-183js"></script>

<script>

    //单击第三个li,显示第三个li的17所在的div

    $(function () {

        //第三个li的点击事件

        $("li:nth-child(3)")click(function () {

            //显示li后面第三个div

            $("#Div2")show();

        });

    });

</script>

该问题似乎是使用jQuery,而非原生JavaScript。

问题描述不够详细,建议补充更详细的代码和问题描述。

如果这个div本身已知的 class 等可用于识别的属性,只能通过下面的这个选择器获取这个div的ID了

$(":contains(append添加进去的已知内容)")attr('id')

jQuerycontains() 详细使用方法说明

先获取当前对象,再根据对象去获取上一个兄弟节点和下一个兄弟节点

prev()

定义和用法

prev() 获得匹配元素集合中每个元素紧邻的前一个同胞元素,通过选择器进行筛选是可选的。

prev(selector)

参数描述

selector    字符串值,包含用于匹配元素的选择器表达式。  

--说明:如果给定一个表示 DOM 元素集合的 jQuery 对象,prev() 方法允许我们在 DOM 树中搜索这些元素的前一个同胞元素,并用匹配元素构造一个新的 jQuery 对象。

next()

定义和用法

next() 获得匹配元素集合中每个元素紧邻的同胞元素。如果提供选择器,则取回匹配该选择器的下一个同胞元素。

next(selector)

参数描述

selector    字符串值,包含用于匹配元素的选择器表达式。  

--说明:如果给定一个表示 DOM 元素集合的 jQuery 对象,next() 方法允许我们搜索 DOM 树中的元素紧跟的同胞元素,并用匹配元素构造新的 jQuery 对象。

示例:

<!--HTML代码-->

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

div id="div2">222</div>

div id="div3">333</div>$("#div2")prev()attr("id");    //获取div2同级的上一个div的id,值为div1

$("#div2")next()attr("id");    //获取div2同级的下一个div的id,值为div3

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>show</title>

<style type="text/css">

div {

    float: left;

    width: 100px;

    height: 80px;

    border: 1px solid #0ff;

    margin-right: 5px;

    display:block;

}

</style>

<!--$("btn")是找到class="btn"的信息,直接each循环出div,里面的children(),里面的item,就是你想要的子元素了,(深圳网站建设:=">

思路:利用jQuery选择器直接根据类名获取对象→遍历对象→使用 attr() 方法获取id属性值。下面实例演示——获取所有class为test的元素的id值:

1、HTML结构

<div class="test" id="div_id">我的类是test,id是div_id</div>

<input type="text" class="test" id="input_id" value="我的类是test,id是input_id" />

<div class="test">我的类是test,没有id属性</div>

<li class="test" id="li_id">我的类是test,id是li_id</li>

<input type="button" value="确定">

2、jQuery代码

$(function(){

$("input[type='button']")click(function() {

var ids = [];

$("test")each(function(index, el) {

var id = $(this)attr("id");

if(typeof(id)!=='undefined'){

idspush(id)

}

});

alert(ids);

});

});

3、效果演示

以上就是关于获取当前点击的 li 下的div里面的内容全部的内容,包括:获取当前点击的 li 下的div里面的内容、js 怎么获取一个div下的所有div的id、怎么用jquery 获取同级div 上一个div的id 跟下一个div的id等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

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

原文地址: http://outofmemory.cn/web/9744495.html

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

发表评论

登录后才能评论

评论列表(0条)

保存