Question

我为html网站上的每个部分生成一个循环list element。

<section class="page1" id="name1"></section>
<section class="page2" id="name2"></section>
<section class="page3" id="name3"></section>`

在我的jQuery函数中，见下文，我为每个部分创建一个链接。

for( var i = 0; i < sections.length; i++){
  _addClass(sections[i], "ops-section")
  sections[i].dataset.index = i + 1;
  sections[i].id=document.getElementById(sections[i].id);
   if(settings.pagination == true) {
         paginationList += '<li><a data-index="' 
     + (i + 1) + '" href="#' + (i + 1) 
     + '"></a><p class="lead">' 
     + sections[i].id + '</p></li>';
    }

with sections[i].id=document.getElementById(sections[i].id);我想读出id后面的文字，例如：name1。 name2，name3等。我想在p-tag之间添加id-name作为文本，以便我得到以下list元素：

<li><a data-index="1" href="#1" class="active"></a><p class="lead">name1</p></li>

但实际上我得到了这个：

<li><a data-index="1" href="#1" class="active"></a><p class="lead">[object HTMLElement]</p></li>

我的错误在哪里？怎么了？

Answer 1

我认为你正在以错误的方式解决这个问题，并使代码更难以遵循。您的问题是您正在连接整个DOM节点，而不是该节点的某个属性的值，因为这一行：

sections[i].id = document.getElementById(sections[i].id)

.getElementById()稍后返回DOM节点，当您使用：

时

sections[i].id

您根本不是指id，而是指从以下位置返回的整个元素：

document.getElementById(sections[i].id)

你甚至不需要任何整条线。

如果您使用.forEach()循环来枚举section元素，则无需设置或管理计数器。

如果您通过DOM API创建元素（而不是构建字符串），您可以更简单地配置每个元素并脱离串联地狱。

请看下面的解决方案，它比您的解决方案更整体代码，但它更清晰，更容易理解。

// Get the section elements into an array
var theSections = Array.prototype.slice.call(document.querySelectorAll("section[class^='page']"));

// Loop over the elements in the array
theSections.forEach(function(section, index){
  // Create li, a and p elements
  var li = document.createElement("li");
  var a = document.createElement("a");
  var p = document.createElement("p");
  
  // Configure each new element
  a.setAttribute("data-index", index + 1);
  a.href = index + 1;
  a.classList.add("active");
  p.classList.add("lead");
  p.textContent = section.id;
  
  // Inject new elements into the DOM
  li.appendChild(a);
  li.appendChild(p);
  document.body.appendChild(li); 
  
  // Just for testing
  console.log(a, p);
});

<section class="page1" id="name1"></section>
<section class="page2" id="name2"></section>
<section class="page3" id="name3"></section>

Answer 2

为什么不起作用？

首先，document.getElementById检索HTML元素。然后，您使用HTML元素覆盖sections[i].id中的ID，结果为[object HTMLElement]。

解决方案

根据Liora Haydont的建议，只需删除行sections[i].id=document.getElementById(sections[i].id);。

for( var i = 0; i < sections.length; i++){
  _addClass(sections[i], "ops-section")
  sections[i].dataset.index = i + 1;
   if(settings.pagination == true) {
         paginationList += '<li><a data-index="' 
     + (i + 1) + '" href="#' + (i + 1) 
     + '"></a><p class="lead">' 
     + sections[i].id + '</p></li>';
    }

Answer 3

在您的代码中，您将整个HTML元素附加到部分ID，这就是您收到该错误的原因。斯科特只是用他的答案打败了我，但我同意他的看法。使用forEach可以让您的生活更轻松。

在这个例子中，我还使用模板文字来创建HTML。但是，YMMV。

const sections = document.querySelectorAll('section');
const out = document.getElementById('out');

const settings = {
  pagination: true
}

sections.forEach((section, i) => {
  const index = i + 1;
  const id = section.id;
  section.classList.add('ops-section');
  section.dataset.index = index;
  if (settings.pagination) {
    const para = `<p class="lead">${id}</p>`;
    const li = `<li><a data-index="${index}" href="#${index}" class="active">test</a>${para}</li>`;
    out.insertAdjacentHTML('beforeend', li);
  }
});

<section class="page1" id="name1">section1</section>
<section class="page2" id="name2">section2</section>
<section class="page3" id="name3">section3</section>

<ul id="out"></ul>

Answer 4

为什么不使用JQuery？这是一个关于如何获取部分的id属性并在JQuery代码中使用它的小型演示：

＆＃13;

$(document).ready(function() {
  $('section').each(function( key, value ) {
    // alert($(this).attr('id') + " - " +  key + ": " + value );
    $('pagination').append("<p class='lead'>* <a data-index='"+ key +"' href=#></a>" + $(this).attr('id') + '</p>');
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<section class="page1" id="name1"></section>
<section class="page2" id="name2"></section>
<section class="page3" id="name3"></section>

<pagination></pagination>

＆＃13;

在jQuery中获取id并使用它

4 个答案:

为什么不起作用？

解决方案