Knockout js 获取特定的 DOM 元素 ID

Question

我在我的网络应用程序中使用淘汰赛 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;
  };
   }

Answer 1

要浏览 HTML 域，您可以使用这 2 个 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