javascriptを使用してdiv要素の内容を他のdiv要素と相対的に取得するにはどうすればよいですか？

Question

は、任意のnoobの質問のための私を許して、この時newbeeビーイング：

コード：

<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をdiv要素のテキストフォーマットされた日付を抽出するTITLE2というタイトルのdivブロック内に埋め込ま取得しようとしていますid "sidebar-date"ではなく、最初のdiv構造内のtitle1というタイトルのdivブロックからテキスト形式の日付を取得します。

最初のdivセクションからではなく、最後のdivセクションから日付を取得するにはどうすればよいですか？

Answer 1

IDはちょうどそのようになっています - ユニーク識別子です。指定されたIDを持つ文書全体に要素を1つだけ持たなければなりません。

この簡単な解決策は、各sidebar-date要素に一意のIDを付けることです。最初の呼び出しではid="sidebar-date-1"と呼び、2番目の呼び出しではid="sidebar-date-2"と呼びます。

同じIDを持つ要素が2つある場合、document.getElementById()は常に文書内で最初に出現する要素を返します。

---

EDIT：

私はちょうどあなたがまた別の問題を持って実現している - あなたは二回あなたのVAR宣言を行うことを試みています。変数がすでに宣言されているため、2番目の宣言は変数の新しい値にはなりません。

parentNode.childNode[]のすべての要素を既に呼び出す必要はありません。これらは、エレメントとを親/子ノードとして使用する必要がある場合にのみ使用してください。ここにはありません。

あなたが取得1の代わり、上記の要素は、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 EDIT：

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> 

...などと続きます。

---

さらに別のEDIT：

ここでは、あなたが（私は不要< div要素>秒の負荷を削除した）何をしたいんコードの最も簡潔なバージョンです。コードの生成に伴って行う必要があるのは、日付コンテナ<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> 

すでにつかむ場合ちなみに、これは

Answer 2

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

... <テーブル>に行くための正しい方法かもしれないそれらのまれの一つであるあなたの問題は、この行であります"sidebar-date"を使用すると、innerTextまたはinnerHTMLを直接呼び出すことができ、parentNodesおよびchildNodesを使用して歩き回ったり戻ったりする必要はありません。

update：この場合は、title1とtitle2という一意のIDをwell、title1、title2のように指定し、getElementByIdを使用して子ノードを参照するか、サイドバーの日付をidの代わりにクラスにする必要があります固有でない場合や、XPathを使用するような複雑な構造を取得する場合は適切です。

ps：また、冗長なJavaScriptコードがあることもわかりました。より良い習慣は、ドキュメント内にidをパラメータとして取ることができる特定のブロックのテキストを返すjavascript関数を一度インクルードすることです。