элементы переупорядочения с использованием jQuery

Question

Я разрабатываю тему для конкретных5. В настоящее время в версии 5.6.2.1 concrete5 использует JQuery 1.7.2 Я создал о -мне био блок так:

<div class="bio-block row" id="<?php echo rand(); ?>"> 
    <div class="bio-image 4u" style="text-align: center;"> 
    <img src="/path/to/pic" width="100%" style="max-width:239px;" margin="auto" alt="" /> 
</div> 
<div class="bio-text 8u"> 
    <h2><span>Name</span> 
- Title</h2> 

    <div class="bio"> 
    <p dir="ltr">Content</div> 
</div> 
</div> 

При просмотре на рабочем столе, я хотел бы, чтобы каждый-другой блок чередовать рис на левой стороне, рис по праву и т.д., используя jsfiddle, я получил эту работу с помощью:

var c = jQuery(window).width(); 
console.log(c); 
if (c >= 820){ 
    jQuery(".bio-block:nth-child(odd)").each(function() { 
     if (id != null){ 
     jQuery("#"+id+" > .bio-image").before(jQuery("#"+id+" > .bio-text")); 
    } 
    }); 
} else { 
    jQuery(".bio-block:nth-child(odd)").each(function() { 
     if (id != null){ 
     jQuery("#"+id+" > .bio-image").after(jQuery("#"+id+" > .bio-text")); 
    } 
    }); 
} 

, но тогда, когда это во внешнем файле JS, я не могу заставить его выполнить на страница.

Нужно ли включать что-то, чтобы начать? возможно, функция вызова на странице?

Answer 1

Скорее всего, вы вызываете его перед тем, как элементы находятся на странице. Используйте dom ready.

$(function() { 

    var c = jQuery(window).width(); 
    console.log(c); 
    if (c >= 820){ 
     jQuery(".bio-block:nth-child(odd)").each(function() { 
      jQuery(".bio-image").before(jQuery(".bio-text")); 
     }); 
    } else { 
     jQuery(".bio-block:nth-child(odd)").each(function() { 
      jQuery(".bio-image").after(jQuery(".bio-text")); 
     }); 
    } 

}); 

Другой вариант заключается в том, чтобы включить тег сценария в конец тела, а не в голову.