Languages
[Edit]
EN

jQuery - how to use parents function example

12 points
Created by:
Anisha-Kidd
562

Using jQuery it is possible to traverse elements with parents method in the following ways.

1. parents method example

1.1. All parents' example

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <style>
    
    div { padding: 5px; }
    
    #my-parent-3 { border: 3px solid red; }
    #my-parent-2 { border: 3px solid green; }
    #my-parent-1 { border: 3px solid orange; }
    
    #my-element {
    	border: 3px solid blue;
    }
    
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
</head>
<body>
  <div id="my-parent-3">
    <div id="my-parent-2">
      <div id="my-parent-1">
        <div id="my-element">My element...</div>
      </div>
    </div>
  </div>
  <script>

    $(document).ready(function() {
        var element = $('#my-element');
      	var parents = element.parents();
      
      	parents.css('border-width', '10px');
    });
   
  </script>
</body>
</html>

1.2. Filtered parents example

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <style>
    
    div { padding: 5px; }
    
    #my-parent-3 { border: 3px solid red; }
    #my-parent-2 { border: 3px solid green; }
    #my-parent-1 { border: 3px solid orange; }
    
    #my-element { border: 3px solid blue; }
    
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
</head>
<body>
  <div id="my-parent-3" class="bound">
    <div id="my-parent-2" class="middle">
      <div id="my-parent-1" class="bound">
        <div id="my-element">My element...</div>
      </div>
    </div>
  </div>
  <script>

    $(document).ready(function() {
        var element = $('#my-element');

        // 'div.bound' can be replaced with any css selector
      	var parents = element.parents('div.bound');
      
      	parents.css('border-width', '10px');
    });
   
  </script>
</body>
</html>
Donate to Dirask
Our content is created by volunteers - like Wikipedia. If you think, the things we do are good, donate us. Thanks!
Join to our subscribers to be up to date with content, news and offers.

jQuery

Native Advertising
🚀
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

❤️💻 🙂

Join