使用juqrey如何通过id=‘time1’获取‘秒’这个内容?:<div class="layui-inline" id="time1"> <label class="layui-form-label">时间:</label> <div class="layui-input-block"> <input type="number" name="time" placeholder="请输入时间" min="0" max="5400" lay-verify="number|time" autocomplete="off" class="layui-input"> <div class="layui-input-suffix layui-input-split"> 秒 </div> </div> </div>
时间: 2023-07-03 12:07:26 浏览: 46
可以使用以下 jQuery 代码来获取 id 为 time1 的元素下的“秒”文本内容:
```
var second = $("#time1 .layui-input-suffix").text().trim();
```
这行代码会通过扫描 id 为 time1 的元素下的所有子元素,找到包含“秒”文本的元素,然后获取该元素的文本内容。最后使用 `trim()` 函数来删除字符串前后的空格。
相关问题
如何通过id=‘time1’获取‘秒’这个内容?:<div class="layui-inline" id="time1"> <label class="layui-form-label">时间:</label> <div class="layui-input-block"> <input type="number" name="time" placeholder="请输入时间" min="0" max="5400" lay-verify="number|time" autocomplete="off" class="layui-input"> <div class="layui-input-suffix layui-input-split"> 秒 </div> </div> </div>
可以使用JavaScript中的getElementById方法获取该元素节点,然后使用innerHTML或innerText属性获取该节点中的文本内容。具体代码如下:
```javascript
var time1 = document.getElementById("time1"); // 获取id为time1的元素节点
var seconds = time1.getElementsByClassName("layui-input-suffix")[0].innerText; // 获取class为layui-input-suffix的元素节点的innerText属性值,即“秒”
console.log(seconds); // 输出“秒”
```
注意:该代码中使用了getElementsByClassName方法获取class为layui-input-suffix的元素节点,因为该节点没有id属性。如果该节点有id属性,也可以使用getElementById方法获取该节点。
<div class="layui-tab" lay-filter="test-handle" lay-allowclose="true" id="content"> <div class="layui-btn addContent" lay-active="addContent">添加创意包</div> <ul class="layui-tab-title" style="width: 85%"> <li class="layui-this" lay-id="1">创意包1</li> <li lay-id="2">创意包2</li> </ul> <div class="layui-tab-content"> <div class="layui-tab-item layui-show"> <div class="layui-tab" lay-filter="test-handle" lay-allowclose="true" id="content"> <ul class="layui-tab-title" style="width: 85%"> <li class="layui-this" lay-id="1">标题1</li> <li lay-id="2">标题2</li> </ul> <div class="layui-tab-content"> <div class="layui-tab-item layui-show">内容-1</div> <div class="layui-tab-item">内容-2</div> </div> </div> </div> <div class="layui-tab-item">主体-2</div> </div> </div>优化一下代码
你可以将重复的代码抽取出来作为一个公共的HTML模板,然后在需要使用的地方引用即可,可以使代码更加简洁。
例如,你可以将创意包的tab页抽出作为公共的模板:
```html
<!-- 创意包模板 -->
<script type="text/html" id="tpl-creative">
<div class="layui-tab" lay-filter="test-handle" lay-allowclose="true" id="{{d.id}}">
<ul class="layui-tab-title" style="width: 85%">
{{# layui.each(d.items, function(index, item){ }}
<li {{ index === 0 ? 'class="layui-this"' : '' }} lay-id="{{ item.id }}">{{ item.title }}</li>
{{# }); }}
</ul>
<div class="layui-tab-content">
{{# layui.each(d.items, function(index, item){ }}
<div class="layui-tab-item {{ index === 0 ? 'layui-show' : '' }}">{{ item.content }}</div>
{{# }); }}
</div>
</div>
</script>
<!-- 页面内容 -->
<div class="layui-tab" lay-filter="test-handle" lay-allowclose="true" id="content">
<div class="layui-btn addContent" lay-active="addContent">添加创意包</div>
<ul class="layui-tab-title" style="width: 85%">
<li class="layui-this" lay-id="1">创意包1</li>
<li lay-id="2">创意包2</li>
</ul>
<div class="layui-tab-content">
<!-- 引用创意包模板 -->
{{# layui.laytpl($('#tpl-creative').html()).render({ id: 'creative1', items: [{ id: '1', title: '标题1', content: '内容-1' }, { id: '2', title: '标题2', content: '内容-2' }] }) }}
</div>
</div>
```
在上面的代码中,我们将创意包的tab页抽取出来作为了一个公共的模板,可以通过laytpl模块来渲染模板并将结果插入到页面中。这样就可以避免重复的代码,使代码更加简洁。