Javascript - Jquery on the fly id 검색

Question

나는 div 요소와 조정 된 링크에 ID를 제공하는 jQuery로 JS 유틸리티를 만들었습니다.

예 :

div id="container" 
div id="1" 
div id="2" 

div id="links" 
a name="1" 
a name="2" 

그래서 페이지가로드되면, 내가 처음 링크를 클릭 (이름 = "1") 첫째 DIV 보여줄 예정이다 (아이디 = "1").

하지만 내 ID가 즉시 만들어지기 때문에 함수가 올바른 div를 찾지 못하는 것 같습니다.

여기 내 기능입니다 : 내가 jQuery를, 기본적인 HTML과 CSS를 사용하고

$("#video_grid .grid_item a").each(
     function(i) { 

      /* FINDING 'A' AND GIVING THEM NAME */ 

      $(this).addClass("item" + (i + 1)); 
      $(this).attr("name", "#" + (i + 1)); 

      /* BACKGROUND */ 

      $(this).css("background-image", 
        "url(images/visu_" + (i + 1) + ".jpg"); 
      $(this).hover(
        function() { 
         $(this).css("background-image", 
           "url(images/visu_hover_" + (i + 1) + ".jpg") 
        }, 
        function() { 
         $(this).css("background-image", 
           "url(images/visu_" + (i + 1) + ".jpg"); 
        }); 
     }); 

/* FINDING DIV GIVING THEM IDS */ 

$("#capsule_player > div").each(function(i) { 
    $(this).addClass("item#" + (i + 1)); 
}); 

/* HERE'S THE PROBLEM */ 

$("#capsule_player div:first-child").css("display", "block"); 
/* appel la div correspondante avec la video */ 
$(".grid_item a").live("click", function() { 
    var divname = $(this).attr("name"); 
    alert(divname); 
    /* WORK FINE TIL HERE */ 

    /* THIS IS THE REAL PROBLEM */ 

    $(".item" + divname).show("slow").siblings().hide("slow"); 

    /* ALERT IF YOU FIND THE DIV WITH THE ID, DOES NOT WORK */ 

    if ($(".item" + divname)[0]) { 
     alert('tonton'); 
    } 

}); 

및 PHP는 허용되지 않습니다.

Answer 1

div의 ID를 부여하는 함수가 클래스를 제공하고 있습니다. 당신은 이런 식으로 변경해야합니다 (

$("#capsule_player > div").each(function(i){ 
    $(this).attr("id", 'item' + (i+1)); 
}); 

해야그 일을하지만, 코드의 나머지 부분은 당신이 원하는 일을 할 수있는가 더 나은/더 의미있는 방법으로 tidyup와 함께 할 수있는 나는 바쁘지 않을 때 할 수도있다.)

편집 :이 같은

뭔가 더 나은 (Armatus '의견에 따라) 될 것이다 :

.live()

// give each div a data-index attribute 
$("div.item").each(function(i){ 
    $(this).attr("data-index", i); 
}); 

// give each anchor a data-index attribute 
$("#video_grid .grid_item a").each(function(i) { 
    $(this).attr("data-index", i); 
}); 

$(".grid_item a").live("click",function() { 
    var index = $(this).attr("data-index"); 

    $('div.item[data-index="' + index + '"]').show(); 
}); 

이되지 않습니다,하지만 난 모르기 때문에 나는 그것을 떠날거야하는 사용중인 jQuery 버전.

$(this).attr('name', 'Q' + (i + 1)); 
    [...] 
    $(this).addClass('itemQ' + (i + 1)); 

에

$(this).attr('name', '#' + (i + 1)); 
    [...] 
    $(this).addClass('item#' + (i + 1)); 

: 크리스챤을 보여줍니다 경로가 더 확실히 더 learningful 장기적으로 아마하지만

Answer 2

, 원래 문제는 쉽게 두 줄을 변경하여 해결 될 수있다 즉각적인 문제는 div에 classname에 '#'기호가 포함되어 있다는 것입니다. 이것은 문자 그대로 클래스 이름의 일부가됩니다. 그러나 선택하는 동안이 '#'기호는 'ID'선택기로 해석됩니다. 그래서 그것은 작동하지 않습니다.