CODEWITHSUNDEEP
javascripthtmljquerycss
PK Kulhari
PK Kulhari

Reputation: 45

Add CSS dynamically to non-sibling div using JavaScript/jQuery?

I have this code, I want to add the display property to div when test() function fired. I call the function many times in the same file and want it to work for each button individually.

At the moment, if I click on any button it adds the CSS to first inline-data div, not the one I clicked for. What do I need to change so that it works for the inline-data that matches with the button?

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge"> 

  <style>
    .inline-data {
      display: none;
    }
  </style>
</head>
<body>
  <table>
    <tr>
      <td>data 1</td>
      <td>
        <span>data 2</span>
        <div class="inline-data">
          <p>Lorem ipsum dolor sit amet.</p>
          <p>Lorem ipsum dolor sit amet.</p>
          <p>Lorem ipsum dolor sit amet.</p>
        </div>
      </td>
      <td><button onclick="test()">Click</button></td>      
    </tr>
    <tr>
      <td>data 1</td>
      <td>
        <span>data 2</span>
        <div class="inline-data">
          <p>Lorem ipsum dolor sit amet.</p>
          <p>Lorem ipsum dolor sit amet.</p>
          <p>Lorem ipsum dolor sit amet.</p>
        </div>
      </td>
      <td><button onclick="test()">Click</button></td>      
    </tr>
    <tr>
      <td>data 1</td>
      <td>
        <span>data 2</span>
        <div class="inline-data">
          <p>Lorem ipsum dolor sit amet.</p>
          <p>Lorem ipsum dolor sit amet.</p>
          <p>Lorem ipsum dolor sit amet.</p>
        </div>
      </td>
      <td><button onclick="test()">Click</button></td>      
    </tr>
  </table>

  <script>
    function test() {
      document.querySelector(".inline-data").style.display = "flex";
    }
    
  </script>
</body>
</html>

Upvotes: 1

Views: 65

Answers (1)

FluffyKitten
FluffyKitten

Reputation: 14312

To do this in the test() function, you would need to pass in which button is clicked, and do something similar to below.

Instead you can di ut all in one single function - remove the onClick from each button and this function will trigger on all button clicks:

$( "button" ).click(function() {
  $(this).closest("tr").find("div.inline-data").css("display", "flex");
});

This finds the tr ancestor of the button that was clicked and then looks for child/grandchild elements with the inline-data. When it finds them, it adds your CSS.

Note - if you don't want this to work for some buttons, you van give those buttons a class and then select that class in the selector e.g. $( "button.myclass" ).click(...

Working Snippet

$( "button" ).click(function() {
      $(this).closest("tr").find("div.inline-data").css("display", "flex");
});
.inline-data {
      display: none;
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
    <tr>
      <td>data 1</td>
      <td>
        <span>data 2</span>
        <div class="inline-data">
          <p>Lorem ipsum dolor sit amet.</p>
          <p>Lorem ipsum dolor sit amet.</p>
          <p>Lorem ipsum dolor sit amet.</p>
        </div>
      </td>
      <td><button>Click</button></td>      
    </tr>
    <tr>
      <td>data 1</td>
      <td>
        <span>data 2</span>
        <div class="inline-data">
          <p>Lorem ipsum dolor sit amet.</p>
          <p>Lorem ipsum dolor sit amet.</p>
          <p>Lorem ipsum dolor sit amet.</p>
        </div>
      </td>
      <td><button>Click</button></td>      
    </tr>
    <tr>
      <td>data 1</td>
      <td>
        <span>data 2</span>
        <div class="inline-data">
          <p>Lorem ipsum dolor sit amet.</p>
          <p>Lorem ipsum dolor sit amet.</p>
          <p>Lorem ipsum dolor sit amet.</p>
        </div>
      </td>
      <td><button>Click</button></td>      
    </tr>
  </table>

Working Snippet with test() function

If you need it to work with the existing HTML and the test function, you can doe it this way:

function test(clicked_button) {
      $(clicked_button).closest("tr").find("div.inline-data").css("display", "flex");
    }
.inline-data {
      display: none;
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
    <tr>
      <td>data 1</td>
      <td>
        <span>data 2</span>
        <div class="inline-data">
          <p>Lorem ipsum dolor sit amet.</p>
          <p>Lorem ipsum dolor sit amet.</p>
          <p>Lorem ipsum dolor sit amet.</p>
        </div>
      </td>
      <td><button onclick="test(this)">Click</button></td>      
    </tr>
    <tr>
      <td>data 1</td>
      <td>
        <span>data 2</span>
        <div class="inline-data">
          <p>Lorem ipsum dolor sit amet.</p>
          <p>Lorem ipsum dolor sit amet.</p>
          <p>Lorem ipsum dolor sit amet.</p>
        </div>
      </td>
      <td><button onclick="test(this)">Click</button></td>      
    </tr>
    <tr>
      <td>data 1</td>
      <td>
        <span>data 2</span>
        <div class="inline-data">
          <p>Lorem ipsum dolor sit amet.</p>
          <p>Lorem ipsum dolor sit amet.</p>
          <p>Lorem ipsum dolor sit amet.</p>
        </div>
      </td>
      <td><button onclick="test(this)">Click</button></td>      
    </tr>
  </table>

Upvotes: 2

Related Questions