jQuery Find Nested Parent Child Elements HTML DOM

jQuery Find Nested Parent Child Elements HTML DOM

In this Post We Will Explain About is jQuery Find Nested Parent Child Elements HTML DOM With Example and Demo.Welcome on Pakainfo.com – Examples, The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to Finding child element of parent pure javascriptExample

In this post we will show you Best way to implement Access a Parent Element With JavaScript or jQuery, hear for jQuery Find Nested Parent Child Elements HTML DOMwith Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.

Read Also:  Ajax Image Upload using PHP and jQuery

Example 1 : Get parent element by jQuery and JavaScript

<div id="div1">
	<div id="div2">
		<input type="button" id="first_btn" value="my First Button" />
	</div>
	<input type="button" id="second_btn" value="my second Button" />
</div>

By using JavaScript

document.getElementById("first_btn").parentNode; // Output result :div2
document.getElementById("second_btn").parentNode; // Output result :div1

By using jQuery

$("#first_btn").parent();// Output result : div2
$("#second_btn").parent();// Output result : div1

Example 2 : get parent element by using jQuery and JavaScript

<div id="live_outer_div">     
<table>
  <tr>
	 <td>
		<input id="first_btn" type="button" value="my First Button" />
	 </td>
	 <td>
		<div id="innerDiv">
		  <input id="second_btn" type="button" value="my second Button" />
		</div>
	  </td>
  </tr>
</table>
</div>

Output result : : tr element OR $(this).closest(‘tr’);

$(this).parents('tr:first'); 
// Output result : : tr element 
$(this).parents('div:first'); OR $(this).closest('div');  

Example 3 : jQuery get nth parent Elements

$(this).parents().eq(0); // Output result : innerDiv
$(this).parents().eq(1); // Output result : td
$(this).parents().eq(2); // Output result : tr
$(this).parents().eq(3); // Output result : table
$(this).parents().eq(4); // Output result : live_outer_div

jQuery parent with a particular id or name:

$(this).parents('#live_outer_div');
OR
$(this).parents('#live_outer_div');

Example

Read Also:  Get Current Url Parameter using Laravel

I hope you have Got What is javascript – Jquery – Accessing nested child elements And how it works.I would Like to have FeadBack From My Blog(Pakainfo.com) readers.Your Valuable FeadBack,Any Question,or any Comments abaout This Article(Pakainfo.com) Are Most Always Welcome.


Related FAQ

Here are some more FAQ related to this Article:

  1. Read Also:  JavaScript Top 5 Most useful JSON Example
  2. Read Also:  Angularjs Show Hide Password in Password TextBox with CheckBox
  3. Read Also:  Simple PHP Laravel Pagination script
  4. Read Also:  How to Change the src of an Image using jquery?
  5. Read Also:  laravel checking if record exists
  6. Read Also:  How to get CSS class Name Property using Jquery
  7. Read Also:  PHP isset Multiple Variables Example
  8. Read Also:  bootstrap vertical carousel slider with jQuery Example
  9. Read Also:  Ajax Dynamic Dependent Dropdown using Laravel Example
  10. Read Also:  Jquery Count Child Elements with class