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

处于这个newbee原谅我的任何小白问题：如何获取div元素相对于另一个使用javascript的div元素的内容？

代码：

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

我试图让埋藏的div块标题为标题2中的JavaScript来提取文本的div格式化的日期id“sidebar-date”，而是从第一个div结构中标题为title1的div块中获取文本格式的日期。

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

来源

2011-08-16 ITHE

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

简单的解决方案是给每个sidebar-date元素一个唯一的ID--第一个叫id="sidebar-date-1"，第二个叫id="sidebar-date-2"。

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

编辑：

我刚认识你也有另外一个问题 - 你正在尝试做你的变种申报两次。第二个声明不会为变量产生新的值，因为变量已经被声明。

您也不需要调用所有的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>

ANOTHER编辑：

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

...等等。

另一个编辑：

这里是你想要做什么的代码的最简洁的版本（我已删除了不必要的<DIV> s的负荷）。在生成代码时，您需要执行的所有操作都是将附加值添加到日期容器<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>

顺便说一句，这是罕见的场合一个<表>可能是正确的方式去的一个...

来源

2011-08-16 12:09:52 DaveRandom

好吧，让我重新补充一点：我可以将ID更改为一个类，但我真正需要的是一些JavaScript来获取日期（以上面显示的格式）并计算从现在开始的剩余天数然后。我需要这两个日期。可能会出现更多的障碍。因此，采取某种动态的方式抓住每个街区的日期并吐出相应位置留下的天数，这是可行的吗？ – ITHE

@ITHE我刚刚编辑了上面的答案，所以它做你想做的 - 从另一个编辑部分的代码并报告回来:-) – DaveRandom

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

你的问题是，在这一行，如果你已经抢“侧边栏日期”你可以直接调用innerText或innerHTML，并且你不需要随着parentNodes和childNodes走起来然后回退。

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

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

来源

2011-08-16 12:16:18 nus

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

回答

相关问题