- iOS/Objective-C 元类和类别
- objective-c - -1001 错误,当 NSURLSession 通过 httpproxy 和/etc/hosts
- java - 使用网络类获取 url 地址
- ios - 推送通知中不播放声音
我们的表单包含多个字段,我们需要通过 jQuery 来完成
如何增加这些 ID
block-post-order-1-select
或者这样的名字
name="xform_demo[block-post-order-1]
你可以查看这个表单代码在 codepen http://codepen.io/earngate/pen/NxPOZz/
HTML
<table id="section-table-section-start1" data-id="section-start1" class="form-table form-table-section no-border form-table-section-indented">
<tr>
<th scope="row">
<div class="xform_field_th">
Block</div>
</th>
<td>
<fieldset id="xform_demo-switch-fold-1" class=" xform-container-switch" data-id="switch-fold-1" data-type="switch">
<div class="switch-options">
<label class="cb-enable selected" data-id="switch-fold-1"><span>On</span></label>
<label class="cb-disable" data-id="switch-fold-1"><span>Off</span></label>
<input class="checkbox checkbox-input" id="switch-fold-1" name="xform_demo[switch-fold-1]" value="1" type="hidden"></div>
</fieldset></td>
</tr>
<tr class="fold">
<th scope="row">
<div class="xform_field_th">
Text logo</div>
</th>
<td>
<fieldset id="xform_demo-block-cat-title-1" class="xform-container-text " data-id="block-cat-title-1" data-type="text">
<input id="block-cat-title-1" name="xform_demo[block-cat-title-1]" value class="regular-text " type="text" size="20"></fieldset></td>
</tr>
<tr class="fold">
<th scope="row">
<div class="xform_field_th">
</div>
</th>
<td>
<fieldset id="xform_demo-block-post-order-1" class=" xform-container-select" data-id="block-post-order-1" data-type="select">
<div style="width: 40%;" id="s2id_block-post-order-1-select" class="select2-container xform-select-item select2-allowclear">
<a href="javascript:void(0)" class="select2-choice" tabindex="-1">
<span id="select2-chosen-2" class="select2-chosen">first-choise</span><abbr class="select2-search-choice-close"></abbr>
<span class="select2-arrow" role="presentation"><b role="presentation">
</b></span></a><label for="s2id_autogen2" class="select2-offscreen">
</label>
<input id="s2id_autogen2" aria-labelledby="select2-chosen-2" class="select2-focusser select2-offscreen" aria-haspopup="true" role="button" type="text" size="20">
<div class="select2-drop select2-display-none select2-with-searchbox">
<div class="select2-search">
<label for="s2id_autogen2_search" class="select2-offscreen"></label>
<input placeholder id="s2id_autogen2_search" aria-owns="select2-results-2" spellcheck="false" class="select2-input" type="text" size="20">
</div>
<ul id="select2-results-2" class="select2-results" role="listbox">
</ul>
</div>
</div>
<select title tabindex="-1" id="block-post-order-1-select" name="xform_demo[block-post-order-1]" class="xform-select-item " style="width: 40%; display: none;" rows="6">
<option></option>
<option value="Desc" selected="selected">Lates</option>
<option value="rand">Random Posts</option>
</select></fieldset></td>
</tr>
<tr style="border-bottom: medium none;" class="compiler fold">
<th scope="row">
<div class="xform_field_th">
Block Style</div>
</th>
<td>
<fieldset id="xform_demo-block_type_1" class=" xform-container-image_select" data-id="block_type_1" data-type="image_select">
<div class="xform-table-container">
<ul class="xform-image-select">
<li class="xform-image-select">
<label class=" xform-image-select-selected xform-image-select block_type_1_1" for="block_type_1_1">
<input class=" compiler noUpdate " id="block_type_1_1" name="xform_demo[block_type_1]" value="node" checked="checked" type="radio"><img src="1-3.png" alt="node" class style=" width: 100%; "></label></li>
<li class="xform-image-select">
<label class=" xform-image-select block_type_1_2" for="block_type_1_2">
<input class=" compiler noUpdate noUpdate " id="block_type_1_2" name="xform_demo[block_type_1]" value="nodey" type="radio"><img src="1-4.png" alt="nodey" class style=" width: 100%; "></label></li>
</ul>
</div>
</fieldset></td>
</tr>
<tr style="display: none;" class="xform-section-indent-start">
<th scope="row"></th>
<td></td>
</tr>
</table>
jQuery
$(document).ready(function () {
$('table#section-table-section-start1').after('<input class="add_btn" id="add_btn" type="button" value="Add New">');
$(".add_btn").click(function(e) {
var avails = $(this).prevAll();
var cnt = avails.length + 1;
$('#section-table-section-start1:last').clone().insertAfter("#section-table-section-start1:last").append( $('<input class="del_btn" type="button" value="Delete this">') );
$("input.del_btn").css({"float":"right","background-color":"#c00","color":"#fff"});
e.preventDefault();
});
$("body").on('click',".del_btn", function() {
$(this).parent().remove();
});
});
你能帮忙吗
最佳答案
所以问题似乎是“如何增加多个节点的多个属性中的数量”。为了简单起见,我将缩小范围以增加多个属性中的 last 整数。
你可以创建一个简单的函数来增加一个节点的一个属性的数量,然后对你需要的元素和属性重复它:
/* Increase the last number for an attribute of an jQuery element, if possible */
function inc ( node, property ) { // .prop does not work with data-id so must use .attr
var number = node.attr( property ) ? node.attr( property ).match( /\d+(?=\D*$)/ ) : null;
if ( number === null ) return; // Abort if has no attribute or no number in it
node.attr( property, node.attr( property ).replace( /\d+(?=\D*$)/, +number[0]+1 ) );
}
var last = $('[id^=section-table-section-start]:last'), cloned = last.clone();
// For each element with any attribute we need, including the cloned table
cloned.find( '[name],[class],[id],[data-id],[for]' ).add( cloned ).each( function(){
var me = $( this );
// Loop and increment each property
$.each( [ 'name', 'className', 'id', 'data-id', 'for' ], function( i, property ) {
inc( me, property );
});
});
有几种方法可以实现循环。
inc
而不是 $.each
。您可能还注意到我更改了您的克隆代码,因为使用自动增加的 id,您无法再通过 id 选择最后一个表。
完整代码如下:
$( function () {
function inc ( element, property ) {
var number = element.attr( property ) ? element.attr( property ).match( /\d+(?=\D*$)/ ) : null;
if ( number === null ) return;
element.attr( property, element.attr( property ).replace( /\d+(?=\D*$)/, +number[0]+1 ) );
}
$('table#section-table-section-start1').after('<input class="add_btn" id="add_btn" type="button" value="Add New">');
$(".add_btn").click(function(e) {
var last = $('[id^=section-table-section-start]:last'), cloned = last.clone();
cloned.find( '[name],[class],[id],[data-id],[for]' ).add( cloned ).each( function(){
var me = $( this );
$.each( [ 'name', 'className', 'id', 'data-id', 'for' ], function( i, property ) {
inc( me, property );
});
});
cloned.insertAfter( last );
if ( ! cloned.find( '.del_btn' ).length ) {
cloned.append(
$( '<input class="del_btn" type="button" value="Delete this">' )
.css({"float":"right","background-color":"#c00","color":"#fff"})
);
}
e.preventDefault();
});
$("body").on('click',".del_btn", function() { $(this).parent().remove(); });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<table id="section-table-section-start1" data-id="section-start1" class="form-table form-table-section no-border form-table-section-indented">
<tr>
<th scope="row">
<div class="xform_field_th">
Block</div>
</th>
<td>
<fieldset id="xform_demo-switch-fold-1" class=" xform-container-switch" data-id="switch-fold-1" data-type="switch">
<div class="switch-options">
<label class="cb-enable selected" data-id="switch-fold-1">
<span>On</span>
</label>
<label class="cb-disable" data-id="switch-fold-1">
<span>Off</span>
</label>
<input class="checkbox checkbox-input" id="switch-fold-1" name="xform_demo[switch-fold-1]" value="1" type="hidden"/>
</div>
</fieldset>
</td>
</tr>
<tr class="fold">
<th scope="row">
<div class="xform_field_th">
Text logo</div>
</th>
<td>
<fieldset id="xform_demo-block-cat-title-1" class="xform-container-text " data-id="block-cat-title-1" data-type="text">
<input id="block-cat-title-1" name="xform_demo[block-cat-title-1]" value class="regular-text " type="text" size="20"/>
</fieldset>
</td>
</tr>
<tr class="fold">
<th scope="row">
<div class="xform_field_th">
</div>
</th>
<td>
<fieldset id="xform_demo-block-post-order-1" class=" xform-container-select" data-id="block-post-order-1" data-type="select">
<div style="width: 40%;" id="s2id_block-post-order-1-select" class="select2-container xform-select-item select2-allowclear">
<a href="javascript:void(0)" class="select2-choice" tabindex="-1">
<span id="select2-chosen-2" class="select2-chosen">first-choise</span>
<abbr class="select2-search-choice-close"/>
<span class="select2-arrow" role="presentation">
<b role="presentation">
</b>
</span>
</a>
<label for="s2id_autogen2" class="select2-offscreen">
</label>
<input id="s2id_autogen2" aria-labelledby="select2-chosen-2" class="select2-focusser select2-offscreen" aria-haspopup="true" role="button" type="text" size="20"/>
<div class="select2-drop select2-display-none select2-with-searchbox">
<div class="select2-search">
<label for="s2id_autogen2_search" class="select2-offscreen"/>
<input placeholder id="s2id_autogen2_search" aria-owns="select2-results-2" spellcheck="false" class="select2-input" type="text" size="20"/>
</div>
<ul id="select2-results-2" class="select2-results" role="listbox">
</ul>
</div>
</div>
<select title tabindex="-1" id="block-post-order-1-select" name="xform_demo[block-post-order-1]" class="xform-select-item " style="width: 40%; display: none;" rows="6">
<option/>
<option value="Desc" selected="selected">Lates</option>
<option value="rand">Random Posts</option>
</select>
</fieldset>
</td>
</tr>
<tr style="border-bottom: medium none;" class="compiler fold">
<th scope="row">
<div class="xform_field_th">
Block Style</div>
</th>
<td>
<fieldset id="xform_demo-block_type_1" class=" xform-container-image_select" data-id="block_type_1" data-type="image_select">
<div class="xform-table-container">
<ul class="xform-image-select">
<li class="xform-image-select">
<label class=" xform-image-select-selected xform-image-select block_type_1_1" for="block_type_1_1">
<input class=" compiler noUpdate " id="block_type_1_1" name="xform_demo[block_type_1]" value="node" checked="checked" type="radio"/>
<img src="1-3.png" alt="node" class style=" width: 100%; "/>
</label>
</li>
<li class="xform-image-select">
<label class=" xform-image-select block_type_1_2" for="block_type_1_2">
<input class=" compiler noUpdate noUpdate " id="block_type_1_2" name="xform_demo[block_type_1]" value="nodey" type="radio"/>
<img src="1-4.png" alt="nodey" class style=" width: 100%; "/>
</label>
</li>
</ul>
</div>
</fieldset>
</td>
</tr>
<tr style="display: none;" class="xform-section-indent-start">
<th scope="row"/>
<td/>
</tr>
</table>
关于javascript - jQuery 克隆形式增加名称、类、ID、数据 ID 等所有属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34164152/
初学者 android 问题。好的,我已经成功写入文件。例如。 //获取文件名 String filename = getResources().getString(R.string.filename
我已经将相同的图像保存到/data/data/mypackage/img/中,现在我想显示这个全屏,我曾尝试使用 ACTION_VIEW 来显示 android 标准程序,但它不是从/data/dat
我正在使用Xcode 9,Swift 4。 我正在尝试使用以下代码从URL在ImageView中显示图像: func getImageFromUrl(sourceUrl: String) -> UII
我的 Ubuntu 安装 genymotion 有问题。主要是我无法调试我的数据库,因为通过 eclipse 中的 DBMS 和 shell 中的 adb 我无法查看/data/文件夹的内容。没有显示
我正在尝试用 PHP 发布一些 JSON 数据。但是出了点问题。 这是我的 html -- {% for x in sets %}
我观察到两种方法的结果不同。为什么是这样?我知道 lm 上发生了什么,但无法弄清楚 tslm 上发生了什么。 > library(forecast) > set.seed(2) > tts lm(t
我不确定为什么会这样!我有一个由 spring data elasticsearch 和 spring data jpa 使用的类,但是当我尝试运行我的应用程序时出现错误。 Error creatin
在 this vega 图表,如果我下载并转换 flare-dependencies.json使用以下 jq 到 csv命令, jq -r '(map(keys) | add | unique) as
我正在提交一个项目,我必须在其中创建一个带有表的 mysql 数据库。一切都在我这边进行,所以我只想检查如何将我所有的压缩文件发送给使用不同计算机的人。基本上,我如何为另一台计算机创建我的数据库文件,
我有一个应用程序可以将文本文件写入内部存储。我想仔细看看我的电脑。 我运行了 Toast.makeText 来显示路径,它说:/数据/数据/我的包 但是当我转到 Android Studio 的 An
我喜欢使用 Genymotion 模拟器以如此出色的速度加载 Android。它有非常好的速度,但仍然有一些不稳定的性能。 如何从 Eclipse 中的文件资源管理器访问 Genymotion 模拟器
我需要更改 Silverlight 中文本框的格式。数据通过 MVVM 绑定(bind)。 例如,有一个 int 属性,我将 1 添加到 setter 中的值并调用 OnPropertyChanged
我想向 Youtube Data API 提出请求,但我不需要访问任何用户信息。我只想浏览公共(public)视频并根据搜索词显示视频。 我可以在未经授权的情况下这样做吗? 最佳答案 YouTube
我已经设置了一个 Twilio 应用程序,我想向人们发送更新,但我不想回复单个文本。我只是想让他们在有问题时打电话。我一切正常,但我想在发送文本时显示传入文本,以确保我不会错过任何问题。我正在使用 p
我有一个带有表单的网站(目前它是纯 HTML,但我们正在切换到 JQuery)。流程是这样的: 接受用户的输入 --- 5 个整数 通过 REST 调用网络服务 在服务器端运行一些计算...并生成一个
假设我们有一个名为 configuration.js 的文件,当我们查看内部时,我们会看到: 'use strict'; var profile = { "project": "%Projec
这部分是对 Previous Question 的扩展我的: 我现在可以从我的 CI Controller 成功返回 JSON 数据,它返回: {"results":[{"id":"1","Sourc
有什么有效的方法可以删除 ios 中 CBL 的所有文档存储?我对此有疑问,或者,如果有人知道如何从本质上使该应用程序像刚刚安装一样,那也会非常有帮助。我们正在努力确保我们的注销实际上将应用程序设置为
我有一个 Rails 应用程序,它与其他 Rails 应用程序通信以进行数据插入。我使用 jQuery $.post 方法进行数据插入。对于插入,我的其他 Rails 应用程序显示 200 OK。但在
我正在为服务于发布请求的 API 调用运行单元测试。我正在传递请求正文,并且必须将响应作为帐户数据返回。但我只收到断言错误 注意:数据是从 Azure 中获取的 spec.js const accou
我是一名优秀的程序员,十分优秀!