javascript - jQuery get child value by ID - Stack Overflow

admin管理员组

文章数量:1022580

I have the following HTML:

<div class="pane">
 <h3>
  <input type=hidden id="m_id" value="{$ment.id}">
  <label id="m_name" onclick="this.style.display='none';document.getElementById('m_name_edit_view').style.display='';document.getElementById('m_name_edit').value=this.innerHTML;">{$ment.writer_name}</label>
  <div id="m_name_edit_view" style="display:none;">
   <input type=text id="m_name_edit" value="{$ment.writer_name}">&nbsp;
   <button onclick="this.parentNode.style.display='none';document.getElementById('m_name').innerHTML=getElementById('m_name_edit').value;document.getElementById('m_name').style.display='';">حفظ</button>
  </div>
 </h3>

 <p>
  <label id="m_content" onclick="this.style.display='none';document.getElementById('m_content_edit_view').style.display='';document.getElementById('m_content_edit').value=this.innerHTML;">{$mentment}</label>
  <div id="m_content_edit_view" style="display:none;">
   <textarea type=text id="m_content_edit">{$mentment}</textarea>
   <button onclick="this.parentNode.style.display='none';document.getElementById('m_content').innerHTML=getElementById('m_content_edit').value;document.getElementById('m_content').style.display='';">حفظ</button>
  </div>
 </p>
 <p><a href="#" class="btn-delete">delete</a> | <a href="#" class="btn-approve">approve</a> | <a href="#" class="btn-spam">spam</a></p>
</div>

and the following jQuery (I'm bad at jQuery)

jQuery(function(){
        $(".pane:even").addClass("alt");

        $(".pane .btn-delete").click(function(){

 var x=SOMETHING;        
         $(this).parents(".pane").animate({ backgroundColor: "#fbc7c7" }, "fast")
         .animate({ opacity: "hide" }, "slow")
         return false;
        }); ..... etc

In the var x=SOMETHING;, I want to be able to get the value of the input box with ID of m_id in that pane. Is it somehow possible?

Thank you.

I have the following HTML:

<div class="pane">
 <h3>
  <input type=hidden id="m_id" value="{$ment.id}">
  <label id="m_name" onclick="this.style.display='none';document.getElementById('m_name_edit_view').style.display='';document.getElementById('m_name_edit').value=this.innerHTML;">{$ment.writer_name}</label>
  <div id="m_name_edit_view" style="display:none;">
   <input type=text id="m_name_edit" value="{$ment.writer_name}">&nbsp;
   <button onclick="this.parentNode.style.display='none';document.getElementById('m_name').innerHTML=getElementById('m_name_edit').value;document.getElementById('m_name').style.display='';">حفظ</button>
  </div>
 </h3>

 <p>
  <label id="m_content" onclick="this.style.display='none';document.getElementById('m_content_edit_view').style.display='';document.getElementById('m_content_edit').value=this.innerHTML;">{$ment.ment}</label>
  <div id="m_content_edit_view" style="display:none;">
   <textarea type=text id="m_content_edit">{$ment.ment}</textarea>
   <button onclick="this.parentNode.style.display='none';document.getElementById('m_content').innerHTML=getElementById('m_content_edit').value;document.getElementById('m_content').style.display='';">حفظ</button>
  </div>
 </p>
 <p><a href="#" class="btn-delete">delete</a> | <a href="#" class="btn-approve">approve</a> | <a href="#" class="btn-spam">spam</a></p>
</div>

and the following jQuery (I'm bad at jQuery)

jQuery(function(){
        $(".pane:even").addClass("alt");

        $(".pane .btn-delete").click(function(){

 var x=SOMETHING;        
         $(this).parents(".pane").animate({ backgroundColor: "#fbc7c7" }, "fast")
         .animate({ opacity: "hide" }, "slow")
         return false;
        }); ..... etc

In the var x=SOMETHING;, I want to be able to get the value of the input box with ID of m_id in that pane. Is it somehow possible?

Thank you.

• javascript
• jquery
• html
• parent-child

Share Improve this question Follow edited Nov 20, 2010 at 17:24 Gert Grenander 17.1k66 gold badges4141 silver badges4343 bronze badges asked Nov 20, 2010 at 17:18 TeAmErTeAmEr 4,7691313 gold badges6666 silver badges108108 bronze badges 1

• 1 Do you have multiple panes? That what it sounds like...and ID attributes must be unique on a document. – Nick Craver Commented Nov 20, 2010 at 17:20

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

You can get the input by using .closest() to get to the <div class="pane"> then .find() the input inside, like this:

$(".pane .btn-delete").click(function(){
  var x = $(this).closest(".pane").find(".m_id").val(); 
  //use x
  //animations...
});

Note the change of id to class to be valid for multiple panes, your <input> should look like this:

<input type="hidden" class="m_id" value="{$ment.id}">

var x = $("#m_id").val();

EDIT:

actually, you don't even need to select it by ID: you could just use

var x = $( "input[type=hidden]", $( this ).parents(".pane") ).val();

this would solve the problem if you have several fragments of code like that.

I have the following HTML:

<div class="pane">
 <h3>
  <input type=hidden id="m_id" value="{$ment.id}">
  <label id="m_name" onclick="this.style.display='none';document.getElementById('m_name_edit_view').style.display='';document.getElementById('m_name_edit').value=this.innerHTML;">{$ment.writer_name}</label>
  <div id="m_name_edit_view" style="display:none;">
   <input type=text id="m_name_edit" value="{$ment.writer_name}">&nbsp;
   <button onclick="this.parentNode.style.display='none';document.getElementById('m_name').innerHTML=getElementById('m_name_edit').value;document.getElementById('m_name').style.display='';">حفظ</button>
  </div>
 </h3>

 <p>
  <label id="m_content" onclick="this.style.display='none';document.getElementById('m_content_edit_view').style.display='';document.getElementById('m_content_edit').value=this.innerHTML;">{$mentment}</label>
  <div id="m_content_edit_view" style="display:none;">
   <textarea type=text id="m_content_edit">{$mentment}</textarea>
   <button onclick="this.parentNode.style.display='none';document.getElementById('m_content').innerHTML=getElementById('m_content_edit').value;document.getElementById('m_content').style.display='';">حفظ</button>
  </div>
 </p>
 <p><a href="#" class="btn-delete">delete</a> | <a href="#" class="btn-approve">approve</a> | <a href="#" class="btn-spam">spam</a></p>
</div>

and the following jQuery (I'm bad at jQuery)

jQuery(function(){
        $(".pane:even").addClass("alt");

        $(".pane .btn-delete").click(function(){

 var x=SOMETHING;        
         $(this).parents(".pane").animate({ backgroundColor: "#fbc7c7" }, "fast")
         .animate({ opacity: "hide" }, "slow")
         return false;
        }); ..... etc

In the var x=SOMETHING;, I want to be able to get the value of the input box with ID of m_id in that pane. Is it somehow possible?

Thank you.

I have the following HTML:

<div class="pane">
 <h3>
  <input type=hidden id="m_id" value="{$ment.id}">
  <label id="m_name" onclick="this.style.display='none';document.getElementById('m_name_edit_view').style.display='';document.getElementById('m_name_edit').value=this.innerHTML;">{$ment.writer_name}</label>
  <div id="m_name_edit_view" style="display:none;">
   <input type=text id="m_name_edit" value="{$ment.writer_name}">&nbsp;
   <button onclick="this.parentNode.style.display='none';document.getElementById('m_name').innerHTML=getElementById('m_name_edit').value;document.getElementById('m_name').style.display='';">حفظ</button>
  </div>
 </h3>

 <p>
  <label id="m_content" onclick="this.style.display='none';document.getElementById('m_content_edit_view').style.display='';document.getElementById('m_content_edit').value=this.innerHTML;">{$ment.ment}</label>
  <div id="m_content_edit_view" style="display:none;">
   <textarea type=text id="m_content_edit">{$ment.ment}</textarea>
   <button onclick="this.parentNode.style.display='none';document.getElementById('m_content').innerHTML=getElementById('m_content_edit').value;document.getElementById('m_content').style.display='';">حفظ</button>
  </div>
 </p>
 <p><a href="#" class="btn-delete">delete</a> | <a href="#" class="btn-approve">approve</a> | <a href="#" class="btn-spam">spam</a></p>
</div>

and the following jQuery (I'm bad at jQuery)

jQuery(function(){
        $(".pane:even").addClass("alt");

        $(".pane .btn-delete").click(function(){

 var x=SOMETHING;        
         $(this).parents(".pane").animate({ backgroundColor: "#fbc7c7" }, "fast")
         .animate({ opacity: "hide" }, "slow")
         return false;
        }); ..... etc

In the var x=SOMETHING;, I want to be able to get the value of the input box with ID of m_id in that pane. Is it somehow possible?

Thank you.

• javascript
• jquery
• html
• parent-child

Share Improve this question Follow edited Nov 20, 2010 at 17:24 Gert Grenander 17.1k66 gold badges4141 silver badges4343 bronze badges asked Nov 20, 2010 at 17:18 TeAmErTeAmEr 4,7691313 gold badges6666 silver badges108108 bronze badges 1

• 1 Do you have multiple panes? That what it sounds like...and ID attributes must be unique on a document. – Nick Craver Commented Nov 20, 2010 at 17:20

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

You can get the input by using .closest() to get to the <div class="pane"> then .find() the input inside, like this:

$(".pane .btn-delete").click(function(){
  var x = $(this).closest(".pane").find(".m_id").val(); 
  //use x
  //animations...
});

Note the change of id to class to be valid for multiple panes, your <input> should look like this:

<input type="hidden" class="m_id" value="{$ment.id}">

var x = $("#m_id").val();

EDIT:

actually, you don't even need to select it by ID: you could just use

var x = $( "input[type=hidden]", $( this ).parents(".pane") ).val();

this would solve the problem if you have several fragments of code like that.

本文标签： javascriptjQuery get child value by IDStack Overflow