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

发布于 2024-11-29 19:56:37 字数 2264 浏览 4 评论 0原文

作为一个新手，请原谅我的任何菜鸟问题：

代码：

<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 部分获取日期？

原文

Being a newbee at this forgive me for any noob questions:

The code:

<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>

I'm trying to get the javascript buried within div block titled title2 to extract the text formatted date for div id "sidebar-date" but instead it grabs the text formatted date from the div block titled title1 within the first div structure.

How do i get the date from the last div section instead of from the first div section?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

简单气质女生网名 2024-12-06 19:56:37

ID 应该是唯一的标识符。整个文档中只能有一个具有给定 ID 的元素。

解决这个问题的简单方法是为每个 sidebar-date 元素指定一个唯一的 id - 因此第一个元素称为 id="sidebar-date-1" ，第二个元素称为 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 所说，您最好使用函数来完成此操作。例如

，在文档的顶部，最好在中：

<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>

...等等。

另一次编辑：

这是最简洁的代码版本，可以实现您想要的功能（我删除了一些不必要的

）。在生成代码时，您所需要做的就是递增附加到日期容器

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>

顺便说一句，这是罕见的情况之一，其中有一个<桌子>。可能是正确的方法...

ID's are supposed to be just that - unique identifiers. You must have only one element on the entire document with a given ID.

The simple solution to this is to give each sidebar-date element a unique id - so for the first one call it id="sidebar-date-1" and the second one call it id="sidebar-date-2".

If two elements exist with the same ID, document.getElementById() will always return the one that occurs first in the document.

EDIT:

I have just realise you also have another problem - you are attempting to do your var declarations twice. The second declaration will not result in a new value for the variable, since the variable was already declared.

You also don't need to call all the parentNode.childNode[] parts as you already have the element you want. These should only be used if you need to do something with an element and it's parent/child nodes, which you don't here.

If you want the element above instead of the one your getting, don't use element.parentNode, give the element above it's own ID and use document.getElementById() on it instead.

This edited version with all issues fixed works for me (updated):

<!-- 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>

ANOTHER EDIT:

As ufotds says, you would be far better to do this with a function. E.g.

At the top of your document, preferably in the <head>:

<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>

Then for the first displayed part:

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

Then for the second displayed part:

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

...and so on and so on.

YET ANOTHER EDIT:

Here is the most succinct version of the code that does what you want (I have removed a load of unnecessary <div>s). All you need to do as you go along generating the code is increment the value appended to the end of the ID for the date container <div>, and pass the same (incremented) value to the function for each iteration.

<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>

Incidentally, this is one of those rare occasions where a <table> might be the right way to go...

回复收藏 0 原文

〃温暖了心ぐ 2024-12-06 19:56:37

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

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

更新返回：我没有看到你有两个。在这种情况下，您应该为名为 title1 和 title2 的 div 提供唯一的 id，例如 title1、title2，然后对它们使用 getElementById 并使用子节点向下走，或者使 sidebar-date 成为一个类而不是 id，这更有效如果它不是唯一的，并且如果您获得像这样的复杂结构，那么使用 XPath 来获取它们是合适的。

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

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

Your problem is in this line, if you already grab the "sidebar-date" you can call innerText or innerHTML directly on it and you don't need to walk up and then back down with parentNodes and childNodes

update: I didn't see you had two of them. In this case you should rather give your divs called title1 and title2 unique id's like well, title1, title2, and then use getElementById on them and walk down with child nodes, or make sidebar-date a class instead of an id, which is more appropriate if it is not unique and if you get complex structures like that use XPath to get them.

ps: also now realize you have redundant javascript code. A better practice would be to include once in your document a javascript function that returns a text for a specific block for which it can take an id as a parameter.

回复收藏 0 原文

~没有更多了~