Knockout js获取特定的DOM元素ID

时间:2016-10-19 20:34:30

标签: javascript knockout.js

我在我的网络应用程序中使用淘汰赛js,我从数据库和绑定数据获取数据使用带有复选框的敲击js工作,当我选中复选框我得到所有相关数据,但我需要元素ID当我选中特定的复选框时,所有的div,是否可能,我是如何实现这个需要的帮助

<div data-bind="foreach:items">
  <ul data-role="listview">
    <li>
      <span id="txtuserID" data-bind="text:userId" style="display:none"></span>
      <span id="txtuserName" style="margin-top: 10px;font-size: 22px;font- weight: bold;padding-left:0px;" data-bind="text:username"></span>
      <div data-bind="attr:{id:$index()}, Image({image});" class="Image">
     <div id="img1"><img src=1.png /><div>
     <div id="img2"><img src=2.png /><div>
     <div id="img3"><img src=3.png /><div>
       </div>
      <input id="chkID" type="checkbox" data-bind="value:userId(), checked: $root.addItemTitle, click: $root.toggle" /></li>
    <ul>
</div>

 <!-- language: lang-js -->

function UserDetails() {
  var self = this;

  function(userId username) {
    var self = this;
    self.userId = userId;
    self.username = ko.observable(username)
    self.Image=ko.computed(function() {
    return this.Image() + " " + this.Imagetype();
  }, this);
  }

  }
  self.addItemTitle = ko.observable();
  //Check Box Selected
  self.toggleAssociation = function(item, event) {
    if (item.Selected() === true) console.log("dissociate item " + item.userId());
    else console.log("associate item " + item.UserID() + " " + "UserName " + item.UserName(), "you clicked " + event.target.id);
    /// here i am getting userID,Username and checkbox element id=chkid, is   it possible to get userName elementID
    item.Selected(!(item.Selected()));
    return true;
  };
   }

1 个答案:

答案 0 :(得分:0)

要浏览HTML域,您可以使用这两个JS方法

event.target.parentElement //Returns the parent object
event.target.children //Returns Children

所以你可以这样做:

var li = event.target.parentElement;

表示您可以访问与复选框相关的所有对象。为了得到div孩子,你可以这样做:

var liChild = li.children;

返回div中所有元素的数组。

获取所有ID,你可以这样做:

function getIDs(array) {
    var output = [];
    for (var i = 0; i < array.length; i++) {
        output[i] = array[i].id;
    }
    return output;
}

然后

var ids = getIDs(liChild);

如果你想获得div,你可以做到这一点

var li = event.target.parentElement;
var ul = li.parentElement;
var div = ul.parentElement;
var divChild = div.children;
var divIDs = getIDs(divChild);
  

编辑:以下是您编辑的新代码

好的,通过编辑你引入了一个包含其他div的div,我的awnser仍然适用,但有一些增强功能。您仍然可以使用.children和.parentElement来查找这些元素。

var li = event.target.parentElement; //Finds parent element
var imageDiv = li.getElementsByClassName('Image')[0]; //Finds the "Image" Div (the zero is there because .getElementByClass returns an array)
var imageChild = imageDiv.children; //Gets the children
var ids = getIDs(imageChild); //Gets the IDs of the children