2014-01-14 3 views
0

다음은 문제입니다. 아래에있는 것과 같은 div, 같은 클래스 이름, 이드가 없습니다. 해당 이미지에 마우스 커서가있는 위치를 기준으로 <h4> 태그 아래의 <span> 텍스트를 수정해야합니다. 나는 mouseenter() 메서드를 사용하여 javascript를 사용하여이 작업을 수행합니다. 문제는이 메소드가 마우스 커서가있는 클래스 이름이 "parent"인 클래스뿐만 아니라 전체 웹 페이지의 모든 범위 텍스트를 변경한다는 것입니다. 내가 같은 클래스 이름, "부모"여러 사업부가있는 경우에도 curent "부모"사업부에서 마우스 유일의 링크를 선택하려면 어떻게jQuery에서 특정 클래스를 선택하는 방법

<div class="parent"> 
    <div class="parent.child"> 
     <a href="#"></a> 
     <div class="parent.chil.child"> 
      <div class="parent.chil.child.child"> 
       <img src ="link1" data-price="a"> 
       <img src ="link2" data-price="b"> 
       <img src ="link3" data-price="c"> 
      </div> 
     </div> 
    </div> 
    <h4> 
     <a href= "aspPage.aspx">text</a> 
    </h4> 
    <p><span class = "spanClassName">text to be changed</span>some text</p> 
    <div class=child1"></div> 
</div> 

.

내가 이해하기를 바랍니다. 그렇지 않다면 물어보십시오. 더 설명하려고합니다.

+0

CSS를 사용하는 것과 같은 방식으로 수행 할 것입니다. 그래서 $ ('. parent> span.SpanClassName'). mouseenter(); – Cam

답변

1

당신은 당신의 선택기에 .을 탈출 할 필요가 documents에 따라

$('.parent\\.chil\\.child\\.child img').on('hover', function(){ 
    $(this).closest('.parent').find('.spanClassName').text($(this).attr('data-price')) 
}); 

DEMO

또한

은 메타 중 하나를 사용하려면 .parent 클래스와 부모를 찾기 위해 .closest()을 사용할 수 있습니다 -characters (예 :! "# $ % & '() * +,./:; < =>? @ [] ^`{| } ~)는 이름의 리터럴 부분으로, 두 개의 백 슬래시로 이스케이프해야합니다. \\. 예를 들어 id = "foo.bar"인 요소는 선택기 $ ("# foo \\. bar")를 사용할 수 있습니다.

+0

이것은 현재 내 문제에 가장 가까운 해결책 인 것 같습니다. 나는 내일 다시 일하게 될 때 그것을 구현하려고 노력할 것입니다. 고맙습니다. – iusmar

+0

예. 효과가 있습니다. 나는이 부분 만 필요로했다 : [code] $ (this) .closest ('. parent'). find ('. spanClassName') ... [/ code]. 내가 원하는 DOM 노드를 찾는 방법을 몰랐다. Satpal, 고맙습니다. – iusmar

0

이미 특정 부모 노드를 알고있는 경우 parent.find('.spanClassName')을 사용하십시오. 부모 노드가 없지만 마우스가있는 링크를 알고있는 경우 link.closest('.parent').find('.spanClassName')을 사용할 수 있습니다.

관련 문제