logo
down
shadow

How to select one element instead of all elements using 'clicked' in a Django for loop


How to select one element instead of all elements using 'clicked' in a Django for loop

By : user3044849
Date : December 01 2020, 04:50 PM
it helps some times You need to get particular div with class folder ,so you can use parent() method of jquery ,and get parent element of clicked element , i.e :
code :
function folderSettings(element) {
  if ($(element).data('clicked')) {
    //getting parent div and remove class
    $(element).parent().removeClass("folder-hidden");
    $(element).data('clicked', false);
  } else {
    //getting parent div and add class
    $(element).parent().addClass("folder-hidden");
    $(element).data('clicked', true);
  }
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="folder">
  <div class="folder-settings-tool" onclick="folderSettings(this)">
    <!-- CHANGE COLOUR OF THE SETTINGS COG TO WHITE -->
    <img src="{% static 'public/image/icons/settings-work-tool.svg' %}">
  </div>
  <div class="folder-settings">
    <div class="title-change">
      <p class="title-rename">RENAME</p><input type="text" name="title">
    </div>
    <div class="archive">
      <p class="archive-text">
        ARCHIVE
      </p>
      <label class="switch">
                                <input type="checkbox">
                                <span class="slider round"></span>
                            </label>
    </div>
    <div class="make-final">
      <p class="archive-text">
        MAKE FINAL
      </p>
      <label class="switch">
                                <input type="checkbox">
                                <span class="slider round"></span>
                            </label>
    </div>
    <div class="downloadable">
      <p class="archive-text">
        DOWNLOADABLE
      </p>
      <label class="switch">
                                <input type="checkbox">
                                <span class="slider round"></span>
                            </label>
    </div>
  </div>
  <a href="{% url 'public:file_detail' model='video' pk=video.pk %}">
    <div class="folder-text">
      <p>VIDEO</p>
    </div>
    <div class="image">
      <img src="{% static 'public/image/icons/folders.svg' %}">
    </div>
    <div class="folder-info">
      <div class="folder-title">
        {{ video.title }}
      </div>
      <div class="folder-date">
        <p><span class="folder-created">Created</span> {{ video.created }}</p>
      </div>
    </div>
  </a>
</div>
<div class="folder">
  <div class="folder-settings-tool" onclick="folderSettings(this)">
    <!-- CHANGE COLOUR OF THE SETTINGS COG TO WHITE -->
    <img src="{% static 'public/image/icons/settings-work-tool.svg' %}">
  </div>
  <div class="folder-settings">
    <div class="title-change">
      <p class="title-rename">RENAME</p><input type="text" name="title">
    </div>
    <div class="archive">
      <p class="archive-text">
        ARCHIVE
      </p>
      <label class="switch">
                                <input type="checkbox">
                                <span class="slider round"></span>
                            </label>
    </div>
    <div class="make-final">
      <p class="archive-text">
        MAKE FINAL
      </p>
      <label class="switch">
                                <input type="checkbox">
                                <span class="slider round"></span>
                            </label>
    </div>
    <div class="downloadable">
      <p class="archive-text">
        DOWNLOADABLE
      </p>
      <label class="switch">
                                <input type="checkbox">
                                <span class="slider round"></span>
                            </label>
    </div>
  </div>
  <a href="{% url 'public:file_detail' model='video' pk=video.pk %}">
    <div class="folder-text">
      <p>VIDEO</p>
    </div>
    <div class="image">
      <img src="{% static 'public/image/icons/folders.svg' %}">
    </div>
    <div class="folder-info">
      <div class="folder-title">
        {{ video.title }}
      </div>
      <div class="folder-date">
        <p><span class="folder-created">Created</span> {{ video.created }}</p>
      </div>
    </div>
  </a>
</div>
<div class="folder">
  <div class="folder-settings-tool" onclick="folderSettings(this)">
    <!-- CHANGE COLOUR OF THE SETTINGS COG TO WHITE -->
    <img src="{% static 'public/image/icons/settings-work-tool.svg' %}">
  </div>
  <div class="folder-settings">
    <div class="title-change">
      <p class="title-rename">RENAME</p><input type="text" name="title">
    </div>
    <div class="archive">
      <p class="archive-text">
        ARCHIVE
      </p>
      <label class="switch">
                                <input type="checkbox">
                                <span class="slider round"></span>
                            </label>
    </div>
    <div class="make-final">
      <p class="archive-text">
        MAKE FINAL
      </p>
      <label class="switch">
                                <input type="checkbox">
                                <span class="slider round"></span>
                            </label>
    </div>
    <div class="downloadable">
      <p class="archive-text">
        DOWNLOADABLE
      </p>
      <label class="switch">
                                <input type="checkbox">
                                <span class="slider round"></span>
                            </label>
    </div>
  </div>
  <a href="{% url 'public:file_detail' model='video' pk=video.pk %}">
    <div class="folder-text">
      <p>VIDEO</p>
    </div>
    <div class="image">
      <img src="{% static 'public/image/icons/folders.svg' %}">
    </div>
    <div class="folder-info">
      <div class="folder-title">
        {{ video.title }}
      </div>
      <div class="folder-date">
        <p><span class="folder-created">Created</span> {{ video.created }}</p>
      </div>
    </div>
  </a>
</div>


Share : facebook icon twitter icon
Loop over elements in jQuery when element is double clicked

Loop over elements in jQuery when element is double clicked


By : user2353344
Date : March 29 2020, 07:55 AM
will be helpful for those in need Assuming the HTML has
elements with the class section, the only other thing I can see that you would need to do is wrap item in a jQuery object.
code :
$(".fadeall").dblclick(function() {
    $("div.section").each(function(idx,item) {
           // Wrapped "item" so you have access to jQuery methods
        $(item).fadeTo(25,inactiveOpacity);
    });
});
$(".fadeall").dblclick(function() {
    $("div.section").each(function() {
           // Wrapped "this" so you have access to jQuery methods
        $(this).fadeTo(25,inactiveOpacity);
    });
});
   // Wrapping code like this ensures that the DOM elements will be
   //    loaded before your code runs.
$(function() {
    $(".fadeall").dblclick(function() {
        $("div.section").each(function() {
               // Wrapped "this" so you have access to jQuery methods
            $(this).fadeTo(25,inactiveOpacity);
        });
    });
});
Jquery select clicked element within a set of elements with the same classname

Jquery select clicked element within a set of elements with the same classname


By : Mark O'Meara
Date : March 29 2020, 07:55 AM
I wish did fix the issue. It sounds like the ajax call is made when one of the elements is clicked, but you need to pass different values in the ajax call depending on which element is clicked. Rather than use an "onclick" attribute, you could do the following:
HTML:
code :
<div class="test" data-param1="value1a" data-param2="value2a">hi</div>
<div class="test" data-param1="value1b" data-param2="value2b">hey</div>
<div class="test" data-param1="value1c" data-param2="value2c">yo</div>
<div class="test" data-param1="value1d" data-param2="value2d">What's up</div>
$('.test').click(function() {
    var $div = $(this);
    $.ajax(url, {
        data: {
            param1: $div.attr('data-param1'),
            param2: $div.attr('data-param2')
        },
        success: function() {
            $div.toggleClass("btn-danger btn-success");
        }
    });
});
Select the equivalent of the clicked element from another group of elements

Select the equivalent of the clicked element from another group of elements


By : Humk
Date : March 29 2020, 07:55 AM
I wish this help you What I'm tryin is this; when a one of the DIV's from group a is clicked, let the equivalent from group B show. I know it can be done individually like shown in my emaple. Because the DIV's are generated dynamically and the editor has the right to add hundreds of DIV's to each group, that wouldn't work. Please what's the best solution for this. , Like this:
code :
$('#groupA div').click(function () {
    $('#groupB div').eq($(this).index()).show()
})
how to select all elements having same class except the clicked element

how to select all elements having same class except the clicked element


By : musho mushos
Date : March 29 2020, 07:55 AM
To fix the issue you can do Here, all the dropdown have the same class. when i click on particular dropdown i just want to slidetoggle for that dropdown and if any other dropdown is slidedown then slide it up so that the current dropdown can only be slided down. I am just confused between the jquery selector. , Use
code :
$(".dropdown").click(function () {
    var child = $(".dropdown-menu", this); //Store reference in a variable
    child.slideToggle(); //slide Toggle
    $('.dropdown-menu').not(child).slideUp(); //Slide up others
});
Select 'this' object of clicked element only (not the other elements within the same class)

Select 'this' object of clicked element only (not the other elements within the same class)


By : Nurefşan Müsevitoğlu
Date : March 29 2020, 07:55 AM
like below fixes the issue You need to change the html of the .btn relative to your link.
You can do that by selecting the closest .btn-group to your link, then searching for .btn inside it :
code :
$(".dropdown-menu a").click(function () {
  $(this).closest('.btn-group').find('.btn').html($(this).text());
});
$(".dropdown-menu a").click(function() {
  $(this).closest('.btn-group').find('.btn').html($(this).text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-group">
  <button type="button" class="btn btn-outline-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="dropdownMenuButton2">
  Option 1                  
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton2">
    <a class="dropdown-item" href="#">Option 2</a>
    <a class="dropdown-item" href="#">Option 3</a>
  </div>
</div>

<div class="btn-group">
  <button type="button" class="btn btn-outline-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="dropdownMenuButton2">
  Type 1                  
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton3">
    <a class="dropdown-item" href="#">Type 2</a>
    <a class="dropdown-item" href="#">Type 3</a>
  </div>
</div>
Related Posts Related Posts :
  • redux how to use state
  • All data in the db is lost when closing a express based node js server
  • How to convert javascript code for Angular
  • XPath select on child nodes
  • Idle event on mouse move - how to stop script permanently on mouse move
  • Why do I get logic is not defined in this code
  • When I enter a number in the input, the first function starts
  • ES6 imports and node_modules hell
  • How to get css selector of clicked-on element?
  • How to auto input MySQL data (input column 1 data to auto input column 2 data with same column) in php?
  • Appending to Datalist Via Javascript
  • Customizing Material-UI Components with Styled-Components
  • Populate elements with class name using Javascript
  • How to execute promises in batches (first resolving 10, then next 10 and so on)
  • Maximo JS automation script: "importPackage" is not defined
  • How to surround selected text inside textarea with <em> on key combination CTRL+i?
  • Your configured registry does not support audit requests ~ On npm audit
  • What's the Angular equivalent of Vue <slot/>?
  • Iconify icon not updating when "data-icon" set with setAttribute()
  • Javascript newbie stuck with XMLHttpRequest return data
  • How to add obj to to state in my example Redux React
  • Loading "grunt-karma.js" tasks...ERROR >> SyntaxError: Unexpected identifier
  • Why do I get log is not defined
  • get the multiple index of the same string
  • How can I iterate over an Array object by using For IN or FOR OF
  • Launch local executable from web browser
  • How to prepare array of json objects to d3 hierarchical tree structure
  • VueJS - event emitted - show HTML before other calculations
  • Export SASS/SCSS variables to Javascript without exporting them to CSS
  • How to attach an event handler only once continuously
  • How to make button open a link in new tab in JavaScript?
  • Find range from the javascript object
  • How can I use my jQuery code as JavaScript?
  • How to show 5 images in a 2 row slider with bxslider
  • How to convert stream into variables in typescript
  • Three.js custom shader error on Chrome GL_INVALID_OPERATION: Active draw buffers with missing fragment shader outputs
  • My JavaScript doesn't work. How can I solve this problem?
  • Why is this async function is running synchronously?
  • Get updated variable from within react hook before return
  • I want to show all image preview but whenever I upload a new one the old one is gone
  • Would I be able to give access to specific electron APIs safely?
  • Why several clicks fire for each instance of a Class?
  • cant grab value from div using attr()
  • Instantiate subclass without constructing
  • Outputing a created object in javascript to a server side JSON file
  • Transition the numeric labels in a bar chart
  • createBottomTabNavigator: hide just one tab from the tabBar
  • iife vs simple statement behavior with document.title
  • showDialogPopup Refresh Page after Click
  • Child component does not set the initial value passed from the parent: ReactJS
  • Nodejs javascript added to button not responding
  • Trying to define a promise.all
  • Python GEE to extract featurecollection timeseries from Landsat imageries
  • How to write negative binary number?
  • Unable to set property of individual object
  • Why Named Function Expression itself cannot assign Name to another Value?
  • How to reset scroll position on single page pagination
  • How to scroll to bottom of page, when a new message is sent - Socket.io
  • How to reconstruct audio blob from a base64 encoded String?
  • How to calculate numbers within an array of objects
  • shadow
    Privacy Policy - Terms - Contact Us © festivalmusicasacra.org