클래스 이름을 사용하여 해당 이미지 경로로드

어떻게하면 테이블을 반복하여 클래스를 잡고 이미지로 바꿀 수 있습니까? 그래서 예를 들어 나는 그들에 추가 숫자 수업을 열이있는 테이블이 :클래스 이름을 사용하여 해당 이미지 경로로드

<td class="images 12-345"></td> 
<td class="images 98-763"></td>

이 숫자는 내가 쿼리의 나머지 부분은 처리가 완료된 후 자바 스크립트로로드 할 이미지 이름으로 coorelate. 따라서 최종 제품은 다음과 같이 보일 것입니다 :

<td class="images 12-345"><img src="http://site.com/12-345.jpg"></td> 
<td class="images 98-763"><img src="http://site.com/98-763.jpg"></td>

그러나 모든 것이 완료되면로드가 완료됩니다. 모든 이미지가 처리 된 후 올바른 이미지 파일로 바뀌는 자리 표시 자 그래픽이 필요합니다.

이러한 행을 반복하고 각 셀에 적절한 이미지를로드하는 방법은 무엇입니까? 먼저 .images selector를 사용하여 각 고유 한 숫자 클래스 이름을 검색하고이를 변수로 전달할 수 있다고 생각했습니다. 그 변수를 사용하여 나머지 이미지 경로에 추가하고 해당 테이블 셀에 다시 배치 할 수 있습니다. 나머지 DOM이로드되고 원래 SQL 쿼리가 완료 될 때까지이 작업을 처리하기를 원하지 않습니다. 이것을 쓰는 가장 좋은 방법이 무엇인지에 대해 조언을 좀 해줄 수 있을까요? jQuery는 나를위한 옵션입니다. http://jsfiddle.net/ambiguous/vrDvc/1/

당신은 $.grep을 조정해야 할 수도 있습니다 당신은 num 배열을 처리하는 방법 (세포에서 단지 숫자)

$('td.images').each(function() { 
    var $td  = $(this); 
    var classes = $(this).attr('class').split(/\s+/); 
    var num  = $.grep(classes, function(c) { return c.match(/^[\d-]+$/) }); 
    if(num.length) 
     $td.append('<img src="http://site.com/' + num[0] + '.jpg">'); 
});

데모 :

출처

2011-10-29 Zac

당신은 jQuery를 함께 같은 것을 할 수 실제 데이터와 일치시키지 만 기본 기술이 작동해야합니다.

출처

2011-10-29 04:05:25

감사드립니다. 클래스가 숫자가 아니기 때문에 내 예제가 좋지 않다는 것을 알았습니다. 하이픈을 넣었습니다. 나는 그것을 반영하기 위해 나의 질문을 업데이트했다. – Zac

@ Zac : 그 형식은 단지 정규 표현식에 대한 약간의 조정이 필요합니다. 내 업데이트를보십시오. –

고마워요! 그것은 멋지다. 그리고 내가 물었던 것을한다. 그러나 내 문제를 해결할 수 없다. 나는이 스크립트로 로딩함으로써 브라우저 충돌을 막을 것이라고 생각했지만 숫자 나 요청은 여전히 압도적 인 것으로 보인다. 드로잉 보드로 돌아갑니다. 당신의 도움을 주셔서 감사합니다. – Zac

클래스 이름을 사용하여 해당 이미지 경로로드

답변

관련 문제