logo
down
shadow

jQuery closest() in .this element is not working


jQuery closest() in .this element is not working

By : wbaidousee
Date : November 21 2020, 04:01 AM
it fixes the issue I have a embeded iframe text element in 3 modal elemets and each has a Copy button. When I click on one copy button, I need to get the output of the particular iframe text. If I use
code :
var n = $(this).closest(".embed-iframe-text").text();
$(".copy-iframe").on("click", function() {
  var m = $(".embed-iframe-text").text();
  var n = $(this).parents('.modal-body').find(".embed-iframe-text").text();
  console.log(n)
});
.embed-iframe-text,
.embed-src span {
  visibility: hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- modal 1 -->
<div class="modal-body">
  <div class="embed-iframe">
    <span class="embed-iframe-text">
			&lt;iframe1 width="100" height="100" src="" frameborder="" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen&gt;&lt;/iframe&gt;
		</span>
  </div>
  <div class="embed-button">
    <div class="embed-src">
      <span>Dynamic text here</span>
    </div>
    <button type="button" class="btn btn-primary copy-iframe">Copy</button>
  </div>
</div>

<!-- modal 2 -->
<div class="modal-body">
  <div class="embed-iframe">
    <span class="embed-iframe-text">
			&lt;iframe2 width="200" height="200" src="" frameborder="" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen&gt;&lt;/iframe&gt;
		</span>
  </div>
  <div class="embed-button">
    <div class="embed-src">
      <span>Dynamic text here</span>
    </div>
    <button type="button" class="btn btn-primary copy-iframe">Copy</button>
  </div>
</div>

<!-- modal 3 -->
<div class="modal-body">
  <div class="embed-iframe">
    <span class="embed-iframe-text">
			&lt;iframe3 width="300" height="300" src="" frameborder="" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen&gt;&lt;/iframe&gt;
		</span>
  </div>
  <div class="embed-button">
    <div class="embed-src">
      <span>Dynamic text here</span>
    </div>
    <button type="button" class="btn btn-primary copy-iframe">Copy</button>
  </div>
</div>


Share : facebook icon twitter icon
jQuery closest() not working on next element in hierarchy

jQuery closest() not working on next element in hierarchy


By : user2441205
Date : March 29 2020, 07:55 AM
like below fixes the issue I have the following html structure: , Use next or siblings in the context
code :
$('.help').on('click', function () {
  $(this).next('.help-wrapper').fadeToggle(300);
});
 $('.help').on('click', function () {
  $(this).siblings('.help-wrapper').fadeToggle(300);
});
jQuery get sibling or closest element not working

jQuery get sibling or closest element not working


By : user2646602
Date : March 29 2020, 07:55 AM
jQuery getting closest sibling element from $(this) not working

jQuery getting closest sibling element from $(this) not working


By : G Pandiyan
Date : March 29 2020, 07:55 AM
will be helpful for those in need This is what you need: JSFiddle
code :
$(this).nextAll("span").first().hide();
jQuery show grandparent of closest element not working

jQuery show grandparent of closest element not working


By : Zac Garby
Date : March 29 2020, 07:55 AM
will help you what_is_the_quote_for is parent/ancestor of visit_status element, thus your code is not working.
You need traverse up to form-group then target its following form-group sibling, then desired operation can be performed.
code :
 $(this).closest('.form-group').next('.form-group').show()
jQuery(function($) {
  $('.what_is_the_quote_for').closest('.form-group').hide();

  $('.visit_status').change(function() {
    if ($(this).val() == 2) {
      $(this).closest('.form-group').next('.form-group').show()
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
  <label for="Visit0VisitStatus" class="col-md-4 control-label">Visit Status</label>
  <div class="col-md-8">
    <select name="data[Visit][0][visit_status]" class="visit_status select2-hidden-accessible" id="Visit0VisitStatus" tabindex="-1" aria-hidden="true">
      <option value="0" selected>Complete</option>
      <option value="1">In Progress</option>
      <option value="2">First visit complete – quote to be submitted</option>
      <option value="3">First visit complete – parts required</option>
      <option value="4">Further visit required</option>
      <option value="5">Attended – passed back to Diamond</option>
    </select>
    <span class="select2 select2-container select2-container--bootstrap select2-container--focus" dir="ltr" style="width: auto;">
            <span class="selection">
            <span class="select2-selection select2-selection--single" role="combobox" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-labelledby="select2-Visit0VisitStatus-container"><span class="select2-selection__rendered" id="select2-Visit0VisitStatus-container" title="First visit complete – quote to be submitted">First visit complete – quote to be submitted</span>
    <span class="select2-selection__arrow" role="presentation"><b role="presentation">
            </b>
      </span>
    </span>
    </span>
    <span class="dropdown-wrapper" aria-hidden="true"></span>
    </span>
  </div>
</div>



<div class="form-group" style="display: none;">
  <label for="Visit0WhatIsTheQuoteFor" class="col-md-4 control-label">What Is The Quote For</label>
  <div class="col-md-8">
    <textarea name="data[Visit][0][what_is_the_quote_for]" class="form-control what_is_the_quote_for" cols="30" rows="6" id="Visit0WhatIsTheQuoteFor"></textarea>
  </div>
</div>
jQuery Find closest element not working

jQuery Find closest element not working


By : Ailson Freire
Date : March 29 2020, 07:55 AM
it fixes the issue Based on your markup, you need to go further up to .product class and then find its shopping_cart
code :
alert($(this).closest( '.product' ).find( ".shopping_cart" ).data( 'item' ));
$(document).on('click', '.Addtocart button', function(event){
    alert($(this).closest('.product').find(".shopping_cart").data('item'));
})
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="http://vsss.co.in/assets/css/main.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="col-sm-4 col-md-3 wow fadeInUp animated animated" style="visibility: visible; animation-name: fadeInUp; margin-bottom: 15px;">
    <div class="products">
        <div class="product">
            <div class="product-image image_slider">
                <div class="image">
                    <a href="http://vsss.co.in/index.php/Detail/view/84"><img src="http://vsss.co.in/assets/images/No_image.png" alt="" class="slide_active" data-number="0" style="height: 100%; width: auto; max-width: 100%; max-height: 251px; display: inline;">
                        <div style="position: absolute;bottom:97px; right:0px">
                            <button class="btn btn-primary icon transparent shopping_cart" data-item="84" data-toggle="dropdown" type="button"> <i class="fa fa-shopping-cart" style="font-size: 22px"></i> </button>
                        </div>
                    </a>
                </div>
            </div>
            <div class="product-info text-left">
                <h3 class="name"><a href="http://vsss.co.in/index.php/Detail/view/84">2048 TWINKLE POUCH</a></h3>
                <h3 class="price"><i class="fa fa-inr" aria-hidden="true"></i>0/-</h3> </div>
            <div class="product-cart text-left">
                <div class="row">
                    <div class="col-md-12 Addtocart">
                        <div style="width:40%;float: left;">
                            <select>
                                <option value="11" data-unit_value="1">Pc</option>
                            </select>
                        </div>
                        <div style="width:40%;float: left;">
                            <input type="text" placeholder="Quantity"> </div>
                        <div style="width:20%;float: left;">
                            <button class="btn btn-primary icon transparent" type="button"> OK </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
Related Posts Related Posts :
  • How do i determine whether a particular image has already been cached using angular 6
  • How to read JSON string sent from the frontend
  • Changing background image with time
  • How to define if component nested to itself in Angular 6?
  • Building a board game using canvas + css animations
  • dropdown flexibility?
  • How "d3.translateExtent" coordinate works?
  • Get the element of an array that has an index given by a variable in JavaScript
  • Replace(), replacing a value not specified
  • javascript native equivalent to .each & .attr
  • Fabric getPointer method not working in Firefox
  • JS scripts not working for divs loaded with jQuery's .load()
  • Use xhr code error on switch/case (javascript)
  • ParseFloat return string instead of number in Javascript
  • How to add a custom script into React app component?
  • Show data while it's being sent to the backend
  • selecting a specific class with .parents()?
  • Get value of a selected option in an label with Javascript
  • How Do I get an HOC wrapped component function from enzyme instance when mounting?
  • i want to update the flashdata on every ajax call
  • Cannot find a tag with JSsoup even though the tag exists in Node JS
  • Exporting the RouterModule?
  • Remove the default checked value in radio button and replace it with the another radio button that is click
  • Switch to test for id and perform action based on class
  • JavaScript Random Number Generation: Unique 500 Integers in Space 10^6: Getting Collisions
  • Display files in directory using PHP and jQuery
  • Knockout JS: adding forms in foreach bindings
  • HTML5 Canvas positioning mouse clicking broken
  • JQuery on change fired only after second change of select box
  • Unable to limit WebRTC P2P Multi-participant Receiving Bandwidth
  • What is the RegEx to just return the last part of the URL
  • State Remains Undefined in React
  • removing content on website before a screen reader can read it with either JavaScript or CSS...?
  • on 'click' firing before click
  • Manipulation of an array sent by ajax to a php file, within a function of another file
  • How to use plunker or jsfiddle to run angular2 code
  • JavaScript lexical environments as objects
  • Iteratively position spheres with DOM pixels using three.js and React
  • React trying to access file at a wrong path
  • AES encryption in JS equivalent of C#
  • Filter an Array based off user input string and menu dropdown items
  • Constantly read local file with JS?
  • React navbar handler with theme
  • Show changes to HTML5 canvas immediately
  • Tooltip Stays Hidden In D3 Treemap
  • Backbone - What is the best way to listen to 2 models?
  • formatting an array of objects output
  • Bind input value to specific value in object
  • Animation doesnt work when onClick event occurs (react.js)
  • Consume enum from ambient TypeScript module using @babel/preset-typescript?
  • Changing order of React components only triggers re-render after second click
  • Track the total time the HTMLAudio was playing
  • Call javascript function in PHP file and load html file after?
  • Theme Development: JavaScript not working when linked from functions.php
  • Add attributes to multiple <td> in datatables
  • Progressive loading codesnip not quite understood
  • How to format default date in javascript?
  • Caesar cipher only gets first value right
  • innerText not showing after setting it straight after creating the element
  • How to use HTML template tag with jQuery?
  • shadow
    Privacy Policy - Terms - Contact Us © bighow.org