Variables Inside JQuery

Question

I have created a Div Tag inside menu li and added a Class Div1 to it. Everything working good. But Now I want to create div tags with div1, and on another click div2 and then div3.

So is it possible to use variable and have a counter inside it?

$(document).ready(function() {
  $(".menu a").click(function() {
    $("<div> Label </div>").appendTo(".menu li").addClass("div1");
    $(".div1").show(function() {
      $(".div1").editInPlace({
        url: "./server",
        show_buttons: true
      }); //editinplace

    }); //show
  }); //click
});

What does your HTML look like, and what did you want the DOM to look like after you click? — Mr. Polywhirl
– Mr. Polywhirl, Commented Dec 11, 2024 at 20:19

Luke Schafer · Accepted Answer · 2009-05-18 06:49:58Z

0

Not sure why you want to change the class, but in case you do that's included... i don't see the ID getting set....

$(document).ready(function()
{
    var increment = 0;
    $(".menu a").click(function () 
    {
        increment++;
        $("<div> Label </div>").appendTo(".menu li").addClass("div" + increment);
        $(".div" + increment).show(function () 
        {
            $(".div" + increment).editInPlace({
                url: "./server",
                show_buttons: true
            });//editinplace

        });//show
    });//click
});

the scope chaining in javascript means that the 'increment' variable is always visible to the click function.

answered May 18, 2009 at 6:49

Luke Schafer

9,2762 gold badges30 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

useranon Over a year ago

Hi,Its working Good..But if i used $("div"+increment).html(); to get the changed value..Its showing simply Label..But i needed the value what i have edited so that i can insert that value into my database.Suggest me please...

Luke Schafer Over a year ago

Hi, Believe it or not, I've never used jquery. I guessed the above example based on your code and my knowledge of javascript. You need to look up jquery and how to use that, maybe create another question for that part of the issue or update this question. I think I solved the original question as stated, however I would like to add this: You should be identifying the divs by ID not class, take a look at the jquery documentation.

Mr. Polywhirl · Accepted Answer · 2024-12-11 20:53:53Z

Without your source HTML, or expected HTML it is difficult to know what you are trying to accomplish.

If you want a jQuery listener, I would advise you use $.fn.on and use the this reference to get the context of the event.

Note: I added a convenience jQuery plugin called $.fn.incrementAndGet to increment a data value and return its new value. This is a simple way to store a counter in the DOM.

(function($) {
  $.fn.editInPlace = function({ url, show_buttons }) {
    console.log('EDIT', { class: $(this).prop('class'), url, show_buttons });
  };
  $.fn.incrementAndGet = function(key, amount) {
    const newValue = this.data(key) + amount;
    this.data(key, newValue);
    return newValue;
  };
})(jQuery);

$(() => {
  $('.menu').data('count', 0).on('click', 'a', function() {
    const $a = $(this);
    const $li = $a.closest('li');
    const $menu = $li.closest('.menu');
    const count = $menu.incrementAndGet('count', 1);
    const className = `div-${count}`;

    $li.append($('<div>', { text: `Label-${count}`, class: className }));

    $(`.${className}`).show(function() {
      $(this).editInPlace({
        url: "./server",
        show_buttons: true
      });
    });
  });
});

.as-console-wrapper { max-height: 5rem !important; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<nav class="menu">
  <ul>
    <li><a href="#">News</a></li>
    <li><a href="#">Archive</a></li>
    <li><a href="#">Videos</a></li>
  </ul>
</nav>

amantur · Accepted Answer · 2009-05-18 06:52:09Z

-1

I think you don't need to specify div1,div2 etc. I've used edit in place with jquery. I just add same class (like editable) to all the elements that I need to edit in place and put in ready function like this:

$(document).ready(function(){
    $(".editable").editInPlace(...../*other stuff*/);
});

answered May 18, 2009 at 6:52

amantur

40.6k22 gold badges136 silver badges192 bronze badges

2 Comments

useranon Over a year ago

SInce i need to fetch values of separate div..Im creating like this.

amantur Over a year ago

@Aruna you can use $(this) to get html from the div that raised the event, that is the div that is clicked!

Collectives™ on Stack Overflow

Variables Inside JQuery

3 Answers 3

2 Comments

Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

2 Comments

Related