获取子节点的标签名称和ID

I have an html that looks like this

我有一个看起来像这样的HTML

<div id="tabs"> 

  <ul id="ul_id"> 
    <li><a href="#tabs-1">tab 1</a></li> 
    <li><a href="#tabs-2">tab 2</a></li> 
    <li><a href="#tabs-3">tab 3</a></li> 
  </ul> 

  <div id="tabs-1"> <p>tab 1 contents</p> </div> 
  <div id="tabs-2"> <p>tab 2 contents</p> </div> 
  <div id="tabs-3"> <p>tab 3 contents</p> </div>

</div>

What I need to do is make this code dynamic because the number of tabs is not fixed.

我需要做的是使这个代码动态化,因为选项卡的数量不固定。

What I have done so far is this

到目前为止我所做的就是这个

<script>
  par = document.createElement('p')
  par.setAttribute("text","Adding nodes");
  dib = document.createElement('div')
  dib.setAttribute("id","tabs-4");
  dib.appendChild(par);
  test=document.getElementById("tabs")
  test.appendChild(dib);
  for(i=0; i< test.childNodes.length; i++)
  {
    document.getElementsByName
    if(test.childNodes[i].getAttribute("id") == "ul_id")
      alert("equal");
    else
      alert(test.childNodes[i].getAttribute("id"));
  }
</script>

Create an element for <p>

为

创建一个元素

Create an element for div

为div创建一个元素

Append(appendChild) the div element to tabs

将div元素追加(appendChild)到制表符

Now Im stuck with the part of getting the tag name and id name of the child nodes of tag.. I need to add the new entry to the list.

现在我坚持获取标签的子节点的标签名称和ID名称的部分。我需要将新条目添加到列表中。

How will I do that?

我该怎么做?

i thought of using getElementsByName but that would mean that I need to add a name attribute to the ul. Im not sure if that was a good idea so I Im thinking of other possible ways to do it. Please help. thanks

我想使用getElementsByName,但这意味着我需要为ul添加一个name属性。我不确定这是不是一个好主意,所以我正在考虑其他可行的方法。请帮忙。谢谢

1 个解决方案

#1

Adding a tab looks like it should be something done as a function rather than inline, so you could write it like this

添加选项卡看起来应该是作为函数而不是内联完成的事情,因此您可以像这样编写它

                                 // i is the last id
var addTab = (function (tab_root, nav_root, i) { // IIFE to create closure
    return function (title, contents) {
        var li, a, div, j;
        // get id
        j = ++i; // I put it in it's own var to avoid race conditions
        // create nav
        li = document.createElement('li');
        a = document.createElement('a');
        a.setAttribute('href', '#tabs-' + j);
        if (title) a.appendChild(document.createTextNode(title));
        li.appendChild(a);
        // create tab
        div =  document.createElement('div');
        if (contents) div.appendChild(document.createTextNode(contents));
        // append to document
        tab_root.appendChild(div);
        nav_root.appendChild(li);
        return {tab: div, nav: a, id: j};
    }
}(document.getElementById('tabs'), document.getElementById('ul_id'), 3)());
// invoke IIFE with initials i.e. id 3 for 3 tabs existing

now

addTab('tab 4', 'tab 4 contents');

An Object is returned with properties tab, nav and id. This lets you do more work with the different parts as required.

返回一个Object,其中包含属性选项卡,nav和id。这使您可以根据需要更多地处理不同的部分。

#1