[jQuery]請問如何取得迴圈中選取的文字與id

ironman

前輩好
小弟在頁面上有數量不等的區塊，是由資料庫迴圈查詢出來的，
該如何點選到指定的區塊，
就可以將指定區塊內的<h1>內的標題及所屬id放進Dialog內，
以進行後續更新資料的表單，
目前我只可重複取到同一個標題與id
沒辦法取得作用中的標題
用$(this)又一直出錯，
可否請教正確的寫法
謝謝

這是頁面上的jQuery

<script language="javascript">
        $(document).ready(function() { 
        
        
                                        //修改的Dialog容器
                                        $("#modiDialog").dialog({
                                          autoOpen: false,
                                          modal: true,
                                          buttons : {
                                                "取消" : function() {
                                                          $(this).dialog("close");
                                                },
                                                "確定修改" : function() {
                                                          $(this).dialog("close");
                                                }
                                          } //buttons end
                                        });
                                        //#modiDialog end
        
        
        
        
        
                                  //修改的Dialog Link
                                  $(".button").click(function(e) {
                                    $("#modiDialog").dialog("open");
                                        e.preventDefault();
                                        var targetTitle = $("h1").html();
                                        var targetid = $("input").attr("value");
                                        document.modiform.get_h1_name.value = targetTitle ;
                                        document.modiform.get_box_id.value = targetid ;
                                  }); //.button end
                                  
        });
</script>

這是頁面上的HTML：

<div id="box1" class="box">
     <h1>AAA</h1>
     <input id="box_id" type="hidden" value="001" />
     <input id="button1" class="button" type="button" value="修改" />
</div>
<div id="box2" class="box">
     <h1>BBB</h1>
     <input id="box_id" type="hidden" value="002" />
     <input id="button2" class="button" type="button" value="修改" />
</div>
<div id="box3" class="box">
     <h1>CCC</h1>
     <input id="box_id" type="hidden" value="003" />
     <input id="button3" class="button" type="button" value="修改" />
</div>
<div id="box4" class="box">
     <h1>DDD</h1>
     <input id="box_id" type="hidden" value="004" />
     <input id="button4" class="button" type="button" value="修改" />
</div>






         <!-- ui-dialog -->
        <div id="modiDialog" title="修改">
                  <form id="modiform" name="modiform" action="modi.php" method="POST" class="formBox">
                    <label for="h1_name">標題名稱：</label>
                      <input id="get_h1_name" name="get_h1_name" type="text"value=""/>
                      <input id="get_box_id" name="get_box_id" type="text" value="" />
                  </form>
        </div>

ironman

終於可以了

Demo在這
http://jquery.gogogogogogogogogo.com/modiTitle.php

ironman

謝謝版大
目前已正確的選取到指定的元素了
但發現另一個問題是當更新完成的callback資料
確無法正確放到同一個元素內
變成有相同class的全部被更新了
小弟用 $('h1').html(data); //全部一起更新了
用  $(this).parent().children("h1").html(data); //也不行,沒反應

                                $("#modiDialog").dialog({
                                  buttons : {
                                        "取消" : function() {
                                          $(this).dialog("close");
                                        },
                                        "確定修改" : function() {
                                          var form = $('#modiform');
                                          $.post(form.attr('action'), form.serialize(), function(data) {
                                                 //$('h1').html(data);
                                                  $(this).parent().children("h1").html(data);
                                                  },''); //Ajax送出
                                                $(this).dialog("close");
                                        }
                                  }, //buttons end
                                  close: function() {
                                        $("#get_h1_name").html(""); 
                                  }
                                }); //#modiDialog end

還請大大指教
謝謝

wmh

你取 h1 的內容和 box_id 應該要由 user 點選的 button 去找相關位置。
但是你目前用

$("h1").html();

是找整個網頁的，所以一定是找到第一個...

找相關的話，就由 $(this) 開始沒錯，先找 parent() 後，再找底下的 h1 或 input

var targetTitle = $(this).parent().children("h1").html();