jquery를 사용하여 부모 요소 값을 얻는 방법?

Question

각 행에 두 개의 셀이있는 행이있는 표가 있고 각 셀에는 사무실 이름, 주소 및 전화 번호 등의 정보가 있습니다. 각 jquery를 사용하면 각 셀에서 주소가 추출되어 피드됩니다. Google지도 지오 코더 객체에 포인트를 가져 와서지도에 플롯합니다. 이제 주소 값의 각 히트시, jquery가 주소 값을 얻는 현재 셀에서 전화 및 사무실 이름의 고유 값을 가져오고 싶습니다. InfoWindow에서 해당 값을 표시 할 수 있도록 해당 값이 필요합니다. 지도? 어떻게 그 값들을 얻을 수 있습니까?

<table class="OfficeInfo" border="0" style="width: 100%" cellspacing="10px" cellpadding="15px"> 
    <tr> 
    <td class="Office1" style="width=40%"> 
    <span class="OfficeName"> 
    <div id="ctl00_PlaceHolderMain_ctl00_ctl17_label" style='display:none'>Office1Link</div><div id="ctl00_PlaceHolderMain_ctl00_ctl17__ControlWrapper_RichLinkField" class="ms-rtestate-field" style="display:inline" aria-labelledby="ctl00_PlaceHolderMain_ctl00_ctl17_label"><div class="ms-rtestate-field"><a href="/" target="_blank">St. Francis Hospital</a></div></div> 
    </span> 
    <span class="Address"> 
    2001 86th Street West <br />Indianapolis, IN 46260   
    </span> <br /> 
    <span class="Phone"> 
    (402) 123-1234</span><br /><br /> 
    <a class="mapdirectionsLink" href="#">map &#38; directions&#62;</a><br /><br /> 
    <span class="Hours"> 
    MTW:9:00AM-5:00PM</span> 
    </td> 

    <td class="Office2" style="width:40%"> 
    <span class="OfficeName"> 
    <div id="ctl00_PlaceHolderMain_ctl00_ctl21_label" style='display:none'>Office2Link</div><div id="ctl00_PlaceHolderMain_ctl00_ctl21__ControlWrapper_RichLinkField" class="ms-rtestate-field" style="display:inline" aria-labelledby="ctl00_PlaceHolderMain_ctl00_ctl21_label"><div class="ms-rtestate-field"><a href="/" target="_blank">St. Margaret's Hospital</a></div></div> 
    </span>  
    <span class="Address"> 
    8075 North Shadeland Avenue <br />Indianapolis, IN 46250</span><br /> 
    <span class="Phone"> 
    (316) 123-3245</span><br /><br /> 
    <a class="mapdirectionsLink" href="#">map &#38; directions&#62;</a><br /><br /> 
    <span class="Hours"> 
    MTW:9:00AM-5:00PM</span> 
    </td> 
    </tr> 

    <tr>         
    <td class="Office3" style="border-top:1px dotted silver; width:40%;"> 
    <span class="OfficeName"> 
    <div id="ctl00_PlaceHolderMain_ctl00_ctl25_label" style='display:none'>Office3Link</div><div id="ctl00_PlaceHolderMain_ctl00_ctl25__ControlWrapper_RichLinkField" class="ms-rtestate-field" style="display:inline" aria-labelledby="ctl00_PlaceHolderMain_ctl00_ctl25_label"><div class="ms-rtestate-field"><a href="/" target="_blank">Munster Women's Center</a></div></div> 
    </span> 
    <span class="Address"> 
    395 Westfield Road <br />Noblesville, IN 46060</span><br /> 
    <span class="Phone"> 
    (316) 123-3245</span><br /><br /> 
    <a class="mapdirectionsLink" href="#">map &#38; directions&#62;</a><br /><br /> 
    <span class="Hours"> 
    MTW:9:00AM-5:00PM</span> 
    </td> 
    <td style="border-top:1px dotted silver; width:40%">       
    </td> 
    </tr>    

</table> 


      function codeAddress() { 
    var infowindow = new google.maps.InfoWindow({}); 
    $('span.Address').each(function(index) { 
     var addy = $(this).text(); 
     var off_name = $(this).siblings('.OfficeName').children(.ms-rtestate-field).text(); 
     var infowindow = new google.maps.InfoWindow({ content: 'Hello world' }); 

     geocoder.geocode({ 'address': addy}, function(results, status) { 
      if (status == google.maps.GeocoderStatus.OK) { 
       map.setCenter(results[0].geometry.location); 
       var marker = new google.maps.Marker({ 
       map: map, 
       position: results[0].geometry.location, 
       title:addy   
      }); 


      //var currentCell=(this).closest(td).html()); 
      // Adding a click event to the marker 
      google.maps.event.addListener(marker, 'click', function() { 
       infowindow.setContent('<span style="color:#808080; font-size:13px; font-family:Trebuchet">'+addy 
          +'<br> <a href="http://maps.google.com/maps?saddr=&daddr=' + this.position.toUrlValue() + '" target ="_blank">Get Direction To Here<\/a>'+      
          off_name + '</span>'); 
       infowindow.open(map, this); 
      }); 


      } else { 
       alert("Geocode was not successful for the following reason: " + status); 
      } 
     }); 
    }); 
} 

Answer 1

this의 현재 상황에 따라 다음이 작동합니다 :

$(this).parent().find('.officeName').html(); 

Answer 2

$(this).parent().find(".OfficeName").text() 사무실 이름을 얻고 $(this).parent().find(".Phone").text() 각 주소에 대해 전화를 가져옵니다.

jsfiddle - 주소를 클릭하면 경고의 이름과 전화 번호가 표시됩니다.

Answer 3

$('td.Office1').chilldren('.Phone') 

사무실 1 TD에서 당신 사무실 (1)의 전화 번호를 받게됩니다

$('span.Address').siblings('.Phone') 

주소가 여기에

Answer 4

$(this).siblings('.Phone').html() 및 $(this).siblings('.Address').html()

Answer 5

에 걸쳐에서 당신에게 전화 번호를 얻을 것이다 작고 간단하지만 Jquery 용 PDF는 처음에는 좋았습니다. Jquery Cheat Sheet을 사용해보십시오. 대부분의 문제에 대한 해결책이 포함되어 있습니다.

Answer 6

jquery 또는 Javascript를 사용하여이 작업을 수행 할 수 있습니다. 여기에서는 이메일 ID 업데이트에 대해 논의 할 것입니다.

예 : 부모 창에서 이메일 자동 채우기로 팝업 창이 열립니다. 업데이트 후 전자 메일은 부모 창 텍스트 상자에서 자동으로 업데이트되고 팝업 창이 자동으로 닫힙니다.

예 :

1) 부모 창

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”> 
<html> 
<title></title> 
<head></head> 

<body> 
<table> 

<tr> 
<td colspan=”2″>Example for update email id.</td> 
</tr> 
<tr> 
<td>Email Id:</td> 
<td> 
<input type=’text’ name=”emailID” id=”emailId” value=”demo@demo.com”></td> 
</tr> 
<tr> 
<td> 
<input type=”button” name=”update” value=”Update” 
onClick=’window.open(“update_popup.html”, “”, “width=400, height=300″)’> 
</td> 
</tr> 
</table> 
</body> 
</html> 

2)로 index.html 파일을 만들기 이메일 아이디 자동 칠 창을 팝업으로 파일 update_popup.html 만들기 업데이트를위한 부모 창. 자세한 내용은

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”> 
<html> 
<title></title> 
<head></head> 
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js”></script> 
<script> 
$(document).ready(function(){ 

//== pre fill parent window email id in popup window for update 

var emailId = window.opener.document.getElementById(“emailId”).value; 
$(“#emailId”).val(emailId); 

//=== update updated email id in to parent window 

$(“#Save”).on(‘click’,function(){ 

var updated_emailId = $(“#emailId”).val(); 
window.opener.document.getElementById(“emailId”).value = updated_emailId; 
window.close(); 
}); 
}); 
</script> 

<body> 
<table> 
<tr> 
<td>Email Id:</td> 
<td> 
<input type=’text’ name=”emailID” id=”emailId” value=””></td> 
</tr> 
<tr> 
<td><input type=”button” name=”Save” id=”Save” value=”Save”></td> 
</tr> 
</table> 
</body> 
</html> 

..

http://www.delhincrjob.com/blog/how-to-get-the-parent-window-element-value-in-popup-window-using-jquery/