如何使用javascript获取div元素相对于另一个div元素的内容？

时间：2011-08-16 12:03:53

标签： javascript getelementbyid

作为一个新手，原谅我任何noob问题：

代码：

<div class="views-row views-row-5 views-row-odd views-row-last">
  <div>
    <div class="sidebar-title">title1</div>
  </div>  
  <div>
    <div>
      <div id="sidebar-date">14 November 2012</div>
    </div>
  </div>  
  <div>
    <div class="sidebar-days-left">
      <script type="text/javascript">
        var marathonDateField = document.getElementById('sidebar-date').parentNode.parentNode.childNodes[1].childNodes[0].innerHTML;
    var now = new Date();
    var then = new Date(marathonDateField);
    var gap = then.getTime() - now.getTime();
    var gap = Math.floor(gap / (1000 * 60 * 60 * 24));
    document.write("" + gap + " days left");
      </script>
    </div>
  </div>  
  <div>
    <div class="sidebar-link">
      <a href="http://my.domain.com/">Click here to read more...</a>
    </div>
  </div>  
  <div class="sidebar-pix"></div>
</div>

<div class="views-row views-row-5 views-row-odd views-row-last">
  <div>
    <div class="sidebar-title">title2</div>
  </div>  
  <div>
    <div>
      <div id="sidebar-date">14 december 2011</div>
    </div>
  </div>  
  <div>
    <div class="sidebar-days-left">
      <script type="text/javascript">
        var marathonDateField = document.getElementById('sidebar-date').parentNode.parentNode.childNodes[1].childNodes[0].innerHTML;
    var now = new Date();
    var then = new Date(marathonDateField);
    var gap = then.getTime() - now.getTime();
    var gap = Math.floor(gap / (1000 * 60 * 60 * 24));
    document.write("" + gap + " days left");
      </script>
    </div>
  </div>  
  <div>
    <div class="sidebar-link">
      <a href="http://my.domain.com/">Click here to read more...</a>
    </div>
  </div>  
  <div class="sidebar-pix"></div>
</div>

我正在尝试将javascript隐藏在标题为title2的div块中以提取div id“sidebar-date”的文本格式化日期，而是从第一个div结构中标题为title1的div块中抓取文本格式化日期

如何从最后一个div部分而不是第一个div部分获取日期？

2 个答案:

答案 0 :(得分：3)

ID应该只是 - 唯一标识符。您必须在整个文档中只有一个具有给定ID的元素。

对此的简单解决方案是为每个sidebar-date元素提供唯一ID - 因此，对于第一个，请将其称为id="sidebar-date-1"，将第二个称为id="sidebar-date-2"。

如果存在两个具有相同ID的元素，document.getElementById()将始终返回文档中首先出现的元素。

修改

我刚刚意识到您还有另一个问题 - 您尝试两次执行 var 声明。第二个声明不会导致变量的新值，因为变量已经声明了。

您也不需要调用所有parentNode.childNode[]部分，因为您已经拥有所需的元素。只有当你需要对元素和它的父/子节点做一些事情时才应该使用它们，你不在这里。

如果你想要得到的那个元素而不是，请不要使用element.parentNode，将元素放在它自己的ID之上并在其上使用document.getElementById()代替

这个已修复所有问题的编辑版本适用于我（已更新）：

<!-- Declare all your variables once at the top of the page -->
<script type="text/javascript">var marathonDateField, now, then, gap</script>

<div class="views-row views-row-5 views-row-odd views-row-last">
  <div>
    <div class="sidebar-title">title1</div>
  </div>  
  <div>
    <div>
      <div id="sidebar-date-1">14 November 2012</div>
    </div>
  </div>  
  <div>
    <div class="sidebar-days-left">
      <script type="text/javascript">
        marathonDateField = document.getElementById('sidebar-date-1').innerHTML;
    now = new Date();
    then = new Date(marathonDateField);
    gap = then.getTime() - now.getTime();
    gap = Math.floor(gap / (1000 * 60 * 60 * 24));
    document.write(gap + " days left");
      </script>
    </div>
  </div>  
  <div>
    <div class="sidebar-link">
      <a href="http://my.domain.com/">Click here to read more...</a>
    </div>
  </div>  
  <div class="sidebar-pix"></div>
</div>

<div class="views-row views-row-5 views-row-odd views-row-last">
  <div>
    <div class="sidebar-title">title2</div>
  </div>  
  <div>
    <div>
      <div id="sidebar-date-2">14 december 2011</div>
    </div>
  </div>  
  <div>
    <div class="sidebar-days-left">
      <script type="text/javascript">
        marathonDateField = document.getElementById('sidebar-date-2').innerHTML;
    now = new Date();
    then = new Date(marathonDateField);
    gap = then.getTime() - now.getTime();
    gap = Math.floor(gap / (1000 * 60 * 60 * 24));
    document.write("" + gap + " days left");
      </script>
    </div>
  </div>  
  <div>
    <div class="sidebar-link">
      <a href="http://my.domain.com/">Click here to read more...</a>
    </div>
  </div>  
  <div class="sidebar-pix"></div>
</div>

另一个编辑：

正如ufotds所说，用功能做这件事要好得多。 E.g。

位于文档顶部，最好位于＆lt; head＆gt;：

<script type="text/javascript">
  function writeGapString (elID) {
    var now, then, gap
    now = new Date();
    then = new Date(document.getElementById('sidebar-date-'+elID).innerHTML);
    gap = Math.floor((then.getTime() - now.getTime()) / (1000 * 60 * 60 * 24));
    document.write(gap + " days left");
  }
</script>

然后是第一个显示的部分：

<div class='sidebar-days-left'>
  <script type="text/javascript">writeGapString(1);</script>
</div>

然后是第二个显示的部分：

<div class='sidebar-days-left'>
  <script type="text/javascript">writeGapString(2);</script>
</div>

......依旧等等。

另一个编辑：

以下是最简洁的代码版本，可以满足您的需求（我删除了大量不必要的＆lt; div＆gt; s）。在生成代码时，您需要做的就是将附加到日期容器＆lt; div＆gt;的ID末尾的值递增，并为每次迭代将相同的（递增的）值传递给函数。

<script type="text/javascript">
  function writeGapString (elID) {
    var now, then, gap
    now = new Date();
    then = new Date(document.getElementById('sidebar-date-'+elID).innerHTML);
    gap = Math.floor((then.getTime() - now.getTime()) / (1000 * 60 * 60 * 24));
    document.write(gap + " days left");
  }
</script>

<div class="views-row views-row-5 views-row-odd views-row-last">
  <div class="sidebar-title">title1</div>
  <div id="sidebar-date-1">14 November 2012</div>
  <div class="sidebar-days-left">
    <script type="text/javascript">writeGapString(1);</script>
  </div>  
  <div class="sidebar-link">
    <a href="http://my.domain.com/">Click here to read more...</a>
  </div>
  <div class="sidebar-pix"></div>
</div>

<div class="views-row views-row-5 views-row-odd views-row-last">
  <div class="sidebar-title">title2</div>
  <div id="sidebar-date-2">14 december 2011</div>
  <div class="sidebar-days-left">
    <script type="text/javascript">writeGapString(2);</script>
  </div>  
  <div class="sidebar-link">
    <a href="http://my.domain.com/">Click here to read more...</a>
  </div>
  <div class="sidebar-pix"></div>
</div>

顺便说一下，这是一个罕见的场合，其中＆lt; table＆gt;可能是正确的方式......

答案 1 :(得分：0)

var marathonDateField 
  = document.getElementById('sidebar-date').parentNode.parentNode.childNodes[1].childNodes[0].innerHTML;

你的问题就在这一行，如果你已经抓住了“sidebar-date”，你就可以直接在它上面调用innerText或innerHTML，你不需要走上去然后用parentNodes和childNodes来回来

更新：我没有看到你有两个。在这种情况下，你应该给你的div名为title1和title2的唯一id，如title，title1，title2，然后在它们上使用getElementById并使用子节点向下走，或者使sidebar-date成为一个类而不是id，这是更多适当的，如果它不是唯一的，如果你得到像这样的复杂结构使用XPath来获取它们。

ps：现在也意识到你有冗余的javascript代码。更好的做法是在文档中包含一次javascript函数，该函数返回特定块的文本，可以将id作为参数。

相关问题
最新问题