logo
down
shadow

Toggle closest DIV in table


Toggle closest DIV in table

By : Santosh Reddy N P
Date : November 22 2020, 10:33 AM
wish help you to fix your issue I have a table with checkboxes that have a class of .toggle-extract and when clicked I'd like them to toggle the closest DIV with the class name .extract-years , You could change to
code :
$(this).closest('tr').find('.extract-years').toggle("fast");
$(document).ready(function() {
  $('.toggle-extract').on('click', function() {
    $(this).closest('tr').find('.extract-years').toggle("fast");
  });
});
body {
  color: #000;
}
.extract-years {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <input type="checkbox" class="toggle-extract">
    </td>
    <td>
      <div class="extract-years">Toggle Box</div>
    </td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" class="toggle-extract">
    </td>
    <td>
      <div class="extract-years">Toggle Box</div>
    </td>
  </tr>
</table>
$(this).closest('table').parent("td").next("td").
        find('.extract-years').toggle("fast");
$(document).ready(function() {
  $('.toggle-extract').on('click', function() {
    $(this).closest('table').parent("td").next("td").find('.extract-years').toggle("fast");
  });
});
body {
  color: #000;
}
.extract-years {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <table class="inline-table-body">
        <tbody>
          <tr>
            <td>
              <input type="checkbox" class="toggle-extract">
            </td>
          </tr>
        </tbody>
      </table>
    </td>
    <td>
      <div class="extract-years">Toggle Box</div>
    </td>
  </tr>
  <tr>
    <td>
      <table class="inline-table-body">
        <tbody>
          <tr>
            <td>
              <input type="checkbox" class="toggle-extract">
            </td>
          </tr>
        </tbody>
      </table>
    </td>
    <td>
      <div class="extract-years">Toggle Box</div>
    </td>
  </tr>
</table>


Share : facebook icon twitter icon
How to use .closest to toggle a paragraph?

How to use .closest to toggle a paragraph?


By : Insanegame27
Date : March 29 2020, 07:55 AM
I hope this helps you . You can get to the "article_total" level (change that to a class, you should not have multiple identical IDs on one page) then from there you can target the p you need
the below code assumes you changed the id to class
code :
$(this).closest('.article_wrapper').find('YOUR_ELEMENT_HERE');
toggle class of .closest()

toggle class of .closest()


By : Jerry Yu
Date : March 29 2020, 07:55 AM
around this issue $(this) means the items that initiated the function, so in this case '$(".toggle-more-less")'. Closest will look for the closest parent to $(this) that fits the set criteria, so in this case it will traverses the dom upwards until it reaches a 'figure'.
code :
$(this).closest('figure').find("figcaption").toggleClass("show");
Toggle closest element

Toggle closest element


By : Arvin Mendoza
Date : March 29 2020, 07:55 AM
it fixes the issue See DOC: http://api.jquery.com/closest/
closest() looking for ancestor, event.target returning clicked element, you should use instead:
code :
$(".event").on("click", function (event) {
    $(this).find(".metadata").toggle();
});
.hilight {
    background-color: yellow;
}
.tright {
    text-align: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

<div class="event" id="event_100">
    <div class="row summary">
        <div class="col-md-3 col-sm-1"> <span class="badge badge-info">special</span></div>
        <div class="col-md-8 col-sm-11">Error excepturi cumque aspernatur amet enim maxime nisi et.</div>
    </div>
    <div class="row metadata">
        <div class="col-md-4 col-sm-4">
            <div class="meta-key tright">key</div>
        </div>
        <div class="col-md-8">
            <div class="meta-value">value</div>
        </div>
        <div class="col-md-4 col-sm-4">
            <div class="meta-key tright">key</div>
        </div>
        <div class="col-md-8">
            <div class="meta-value">value</div>
        </div>
    </div>
</div>
<div class="event" id="event_99">
    <div class="row summary">
        <div class="col-md-3 col-sm-1"> <span class="badge badge-info">special</span></div>
        <div class="col-md-8 col-sm-11">Error excepturi cumque aspernatur amet enim maxime nisi et.</div>
    </div>
    <div class="row metadata">
        <div class="col-md-4 col-sm-4">
            <div class="meta-key tright">key</div>
        </div>
        <div class="col-md-8 col-sm-4">
            <div class="meta-value">value</div>
        </div>
    </div>
</div>
<div class="event" id="event_98">
    <div class="row summary">
        <div class="col-md-3 col-sm-1"> <span class="badge badge-warning">special</span></div>
        <div class="col-md-8 col-sm-11">Error excepturi cumque aspernatur amet enim maxime nisi et.</div>
    </div>
    <div class="row metadata">
        <div class="col-md-4 col-sm-4">
            <div class="meta-key tright">key</div>
        </div>
        <div class="col-md-8">
            <div class="meta-value">value</div>
        </div>
        <div class="col-md-4 col-sm-4">
            <div class="meta-key tright">key</div>
        </div>
        <div class="col-md-8">
            <div class="meta-value">value</div>
        </div>
    </div>
</div>
Toggle class in closest parent

Toggle class in closest parent


By : Harpreet Singh
Date : March 29 2020, 07:55 AM
This might help you So I have this jquery that i need to make it work. But through all the parents() and children(), I can't get to where I want. , You should take p as selector, not as property:
code :
$(this).closest(".quoteCompare").children(".quoteCompareInside").find('p').toggleClass("icon-tick icon-cross");
$(this).closest(".quoteCompare").children(".quoteCompareInside").find('p').eq(0).toggleClass("icon-tick icon-cross");
$(this).closest(".quoteCompare").prev().children(".quoteCompareInside").find('p').eq(0).toggleClass("icon-tick icon-cross");
$(function() {
  $(".addOpt").click(function(e) {
    $(this).text(function(i, text) {
      return text === "Add" ? "Remove" : "Add";
    });
    $(this).toggleClass("btn-primary btn-remove");
    
    
    //the problem is the following line:
    $(this).closest(".quoteCompare").prev().children(".quoteCompareInside").find('p').eq(0).toggleClass("icon-tick icon-cross");
    
    e.preventDefault();
  });
})
.icon-cross {
  width: 50px;
  height: 10px;
  background-color: green;
}
.icon-tick {
  width: 50px;
  height: 10px;
  background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row ">
  <div class="medium-6 xsmall-12 small-12 column quoteCompare  ">
    <div class="quoteCompareInside quoteStandard sameHeight2">
      <p class="icon-cross"></p>
      <p class="title noMarginBottom">10€</p>
    </div>
  </div>
  <div class="medium-6 xsmall-12 small-12 column quoteCompare  ">
    <div class="quoteCompareInside quoteStandard sameHeight2">
      <div class="form-row valign">
        <button type="button" class="btn btn-primary buttonOpt addOpt">Add</button>
      </div>
    </div>
  </div>
</div>
How to toggle closest children class

How to toggle closest children class


By : IGC2
Date : March 29 2020, 07:55 AM
Hope that helps Get rid of your onclick event and just use jquery on event, like this:
code :
$("button").on("click", function(){
var itag = $(this).find("i");
    itag.toggleClass('fa-square-o fa-check-square-o');
    itag.text(itag.attr("class"))
})
button{
  display:block;
  padding:50px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="button-checkbox">
    <button type="button" id="1" data-color="white" class="btn btn-sm btn-default">
        <i class="fa fa-square-o private"></i>
        </button>
     <input name="private" type="checkbox" class="hidden" />
</span>
<span class="button-checkbox">
    <button type="button" id="1" data-color="white" class="btn btn-sm btn-default">
        <i class="fa fa-square-o private"></i>
        </button>
     <input name="private" type="checkbox" class="hidden" />
</span/>
Related Posts Related Posts :
  • How to debug Vue application with google chrome
  • html 5 web app cache download complete javascript alert?
  • Ember.js setupController fired only once
  • How to validate a currency input
  • How to convert my Array of data to key & value pair
  • Statistics circles in CSS
  • So I wanted to make a trig solver in javascript?
  • Showing HighCharts series name on x-axis and in legend
  • In Rails, how can we pass parameters in script?
  • Build Fails: `npm rebuild node-sass --force`
  • Angular Datepicker change dateformat
  • Trying to extract data from between two sets of characters
  • Configuring Jest in WebStorm
  • Uncaught Error: Syntax error, unrecognized expression: tr.ec_portfolio_title,
  • JQuery fading in fading out continuously
  • Unexpected end of input (Line 1) and Undefined Function?
  • How to animate the width of a div slowly with jquery
  • JavaScript + RegEx Complications- Searching Strings Not Containing SubString
  • SignalR - Unable to get property 'client' of undefined or null reference
  • full calendar not displaying when loaded (with backbone)
  • Angular: Update service and share data between controllers
  • ReplaceAll Google script
  • Search for matching LI items in separate UL
  • Access arguments of an... argument
  • Customizing Google custom search jsapi (query strings)
  • React | Can´t load Images > Module not found
  • Dynamically creating buttons in DOJO
  • 404 Not Found in AJAX post call
  • How do I find out, using javascript, what software opened and running my application?
  • Javascript to check the status of wireless connection
  • StarDict support for JavaScript and a Firefox OS App
  • Phonegap event Resume
  • call javascript function on ENTER key press?
  • When is the best time to remove no-js classes from the html tag
  • Recommended email sending languages
  • setInterval not working properly with chrome
  • Does IE create new scope for each script tag?
  • Uncaught SyntaxError: Unexpected token < Underscore and parse issues
  • How to pass captured URL to Email Body in HTML
  • How to structure default nested resources?
  • Store all the keys of a JSON object in a variable
  • Need an efficient way to group the Array of object in javascript
  • a sensible approach to highcharts x-axis labels
  • IDE autocompletion for javascript AMD loading style
  • Bootstrap menu disappears after first click setting the ul style to none
  • split ajax json response errors in each field
  • how to add javascript in head in cmsms
  • REGEX: Finding the correct occurrence order of some given special characters in a string
  • How do you preserve a JavaScript date's time zone from browser to server, and back?
  • Return binary result from phantomjs webserver
  • must be listed in the web_accessible_resources manifest key in order to be loaded by pages outside the extension.
  • Replacing a substring of an element's text with another string
  • How do I filter marks greater than or equal to 90 in this array?
  • Modify the text of my radio input button?
  • Clicking on status bar does not scroll to top of app (Trigger.io)
  • Mocha JS: How to highlight specific assertion failure?
  • $.getJSON jquery parsing to HTML
  • Find items of a certain class (a) that are also in other classes (b,c,d)
  • Setting different images for D3 force-directed layout nodes
  • Integrating Dropzone.js with angular
  • shadow
    Privacy Policy - Terms - Contact Us © ourworld-yourmove.org