Как получить содержимое элемента div относительно другого элемента div с помощью JavaScript? - PullRequest
Новая
       5

Как получить содержимое элемента div относительно другого элемента div с помощью JavaScript?

0 голосов
/ 16 августа 2011

Будучи новичком в этом, простите меня за любые вопросы по 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, скрытый в блоке div с названием title2, чтобы извлечь дату в формате текста для id id "sidebar-date", но вместо этого он извлекает дату в формате текста из блока div под названием title1 в первой структуре div .

Как получить дату из последнего раздела div вместо первого раздела div?

Ответы [ 2 ]

3 голосов
/ 16 августа 2011
Предполагается, что

идентификаторов - это просто уникальный идентификатор.У вас должен быть только один элемент во всем документе с указанным идентификатором.

Простое решение этого заключается в том, чтобы дать каждому элементу sidebar-date уникальный идентификатор - поэтому для первого вызовите его id="sidebar-date-1" ивторой вызовите его id="sidebar-date-2".

Если два элемента существуют с одинаковым идентификатором, document.getElementById() всегда будет возвращать тот, который находится первым в документе.

РЕДАКТИРОВАТЬ:

Я только что понял, у вас есть еще одна проблема - вы пытаетесь сделать свои var объявлений дважды.Второе объявление не приведет к новому значению переменной, так как переменная уже была объявлена.

Вам также не нужно вызывать все части parentNode.childNode[], поскольку у вас уже есть нужный элемент.Их следует использовать, только если вам нужно что-то сделать с элементом и , это родительские / дочерние узлы, чего у вас нет.

Если вы хотите вместо элемента выше того, который вы получаете, не используйте element.parentNode, дайте элементу выше его собственный идентификатор и используйте вместо него 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>

... и т. д. и т. п.

ДАЙТЕ ДРУГОЕ РЕДАКТИРОВАНИЕ:

ВотНаиболее краткая версия кода, которая делает то, что вы хотите (я удалил нагрузку ненужных

с).Все, что вам нужно сделать при генерации кода, это увеличить значение, добавленное в конец идентификатора для контейнера даты
, и передать одно и то же (увеличенное) значение в функцию для каждой итерации. 
<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>

Кстати, это один из тех редких случаев, когда

0 голосов
/ 16 августа 2011 
var marathonDateField 
  = document.getElementById('sidebar-date').parentNode.parentNode.childNodes[1].childNodes[0].innerHTML;

Ваша проблема в этой строке: если вы уже захватили «боковую панель-дату», вы можете напрямую вызвать innerText или innerHTML, и вам не нужно подниматься, а затем отступать с parentNodes и childNodes

обновление: я не видел, чтобы у вас их было два.В этом случае вы должны дать своим div-элементам title1 и title2 уникальный идентификатор, например well, title1, title2, а затем использовать getElementById для них и перейти с дочерними узлами или сделать sidebar-date классом вместо id, что болееуместно, если оно не уникально и если вы получаете сложные структуры, подобные этой, используйте XPath для их получения.

ps: теперь также понимайте, что у вас избыточный код JavaScript.Лучше всего один раз включить в документ функцию javascript, которая возвращает текст для определенного блока, для которого он может принять идентификатор в качестве параметра.

...