Question

在jquery的帮助下，我可以动态添加/删除输入字段。但我在尝试计算标签数量data-bind='personCount'时遇到困难，并在html中显示结果。例如，对于每个项目展示Person #1, Person #2, Person #3等，我已经能够在选择下拉菜单中使用items。如何计算标签data-bind='personCount', to show人＃1`等的时间？这是JSFIDDLE

Jquery的

var template;

function Person() { //we use this as an object constructor.
    this.personCount= 0;
    this.firstName = '';
}

function renderItem() {
    template = template || $("[data-template=item]").html();
    var el = $("<div></div>").html(template);
    return el; // a new element with the template
}

function addItem() {
    var person = new Person(); // get the data
    var el = renderItem(); // get the element

    el.find("[data-bind=personCount]").keyup(function (e) {

    });

    el.find("[data-bind=firstName]").keyup(function (e) {
        person.firstName = this.value;
    });

    return {
        el: el,
        person: person
    }
}

var stuff = [];
$("[data-action='add']").click(function(e){
     var item = addItem();
     $("body").append(item.el);
     stuff.push(item);
});

$("[data-action='remove']").click(function(e){
      if(stuff.length > 1) {
          var item = stuff.pop()
          item.el.remove();
      }
});

     var item = addItem();
     $("body").append(item.el);
     stuff.push(item);


  });

HTML

<div>
<script type='text/template' data-template='item'>
<ul class="clonedSection">
<label data-bind='personCount' class="personCount">Person # {person_count}</label> 
    <li style="list-style-type: none;">
        <input type="text" data-bind='firstName' placeholder="First Name" required pattern="[a-zA-Z]+" />
    </li>
</ul>
</script>
<input type='button' value='add' data-action='add' />
<input type='button' value='remove' data-action='remove' />
</div>

Answer 1

写：

var count = $("body").find(".personCount[data-bind='personCount']").length;
$("body").find(".personCount[data-bind='personCount']:last").text("Person # {"+count+"}");

$("body").find(".personCount[data-bind='personCount']").length会为您提供包含课程personCount和属性data-bind='personCount'的元素数量。

Updated fiddle here.

Answer 2

这是你小提琴的更新 http://jsfiddle.net/6MXrN/4/

我认为这就是你要找的东西。我刚刚做了

$('label[data-bind="currentPerson"]).length

获取标签元素的数量。

计算<label>元素在页面</label>中出现的次数

2 个答案: