Question

所以我正在创建一个互动形式我希望能够在给定选择的上方和下方添加新输入但是，当我这样做时，我需要更新新条目下方所有内容的ID和标签我知道我可以使用each（）函数遍历所有div，但是，我确信只需更新下面需要更新的内容会更快，特别是如果有多个输入字段。

这是我到目前为止所拥有的。

<form>
  <div id="ent1" class="entry">
    <span class="label">1. </span>
    <input type="text">
    <button type="button" onclick="deleteentry(this);"> Delete </button>
    <button type="button" onclick="addabove(this);"> Add above </button><br><br>
  </div>
  <div id="ent2" class="entry">
    <span class="label">2. </span>
    <input type="text">
    <button type="button" onclick="deleteentry(this);"> Delete </button>
    <button type="button" onclick="addabove(this);"> Add above </button><br><br>
  </div>
  <div id="ent3" class="entry">
    <span class="label">3. </span>
    <input type="text">
    <button type="button" onclick="deleteentry(this);"> Delete </button>
    <button type="button" onclick="addabove(this);"> Add above </button><br><br>
  </div>
  <div id="ent4" class="entry">
    <span class="label">4. </span>
    <input type="text">
    <button type="button" onclick="deleteentry(this);"> Delete </button>
    <button type="button" onclick="addabove(this);"> Add above </button><br><br>
  </div>
</form>

以下是脚本。

<script>
function deleteentry(obj)
{
  var o = obj;
  while (!o.id)
  {
    o = o.parentNode;
  }

  obj = "#" + o.id;
  $(obj).remove();
}

function addabove(abo)
{
  var a = abo;
  while (!a.id)
  {
    a = a.parentNode;
  }

  var anum = a.id.replace(/\D/g,'');
  anum = parseInt(anum);

  var b = a.id; //This is so the div clicked on has a new temp id and no 2 divs share the same id
  a.id = "temp";

  var ins1 = "<div id='" + b + "' class='entry'>";
  var ins2 = "<span class='label'>" + anum + ". </span>";
  var ins3 = "<input type='text'> <button type='button' onclick='deleteentry(this);'> Delete </button> ";
  var ins4 = "<button type='button' onclick='addabove(this);'> Add above </button>" + b + "<br><br></div>";

  $(a).prepend(ins1 + ins2 + ins3 + ins4);
}

那么我们假设您点击上面的条目.2，我如何访问仅 ent2 div下面的div？

Answer 1

MikelG - 请看这个小提琴： http://jsfiddle.net/rk73F/

有两个功能可以获取ID +提取你的addAbove一个.. 还删除了你的onclick事件，我发现jquery .on click或.live点击更好..你可能必须根据正在使用的jquery版本更改那些处理程序定义..

更新（两次）

新小提琴：

http://jsfiddle.net/rk73F/2/

function getMaxID() {
var ar = new Array();
// for each element with id that starts with 'ent'
$('[id^="ent"]').each(

function () {
    // add it to the array (only its numeric part)
    ar.push(
    // extract the numeric part to be added in the array
    parseInt($(this).attr('id').replace('ent', '')));
});
// find the max value in the array 
return Math.max.apply(Math, ar);
}

function addAbove(abo) {
var b = getMaxID() + 1;

var ins1 = "<div id='ent" + b + "' class='entry'>";
var ins2 = "<span class='label'>" + b + ". </span>";
var ins3 = "<input type='text'> <button type='button' class='btnDelete'> Delete </button> ";
var ins4 = "<button type='button' class='btnAdd'> Add above </button><br><br></div>";
$(abo).before(ins1 + ins2 + ins3 + ins4);
}

function setDivsSequentialIDs()
{
$.each($('form>div'), function( ind, val ){
    $(this).attr('id', 'ent' + ind);
    $(this).find('span.label').html(ind + '.');
});
}

$(document).ready(function () {
//NEW:
$('form').on('click', '.btnAdd', function () {
    addAbove($(this).parent());
});

$('form').on('click', '.btnDelete', function () {
    $(this).parent().remove();
});
//EndNEW
 });

Answer 2

使用$('#your-id').next()访问所选元素下方的元素，$('#your-div').prev()访问上述元素。

有关详细信息，请参阅http://api.jquery.com/next/和http://api.jquery.com/prev/。

使用jquery更改给定div下方的div id？

2 个答案: