Question

var = cooldynamicelement

我怎样才能将我从div 中获取jQuery的内部html存储起来，即 <div class="username"> </div>，以便在jQuery 中存储为可访问的变量，例如。 cooldynamicelement所以我可以通过调用 ie 来抓取并使用我网站的不同区域。 $cooldynamicelement并使用动态.username元素值进行更新。

Answer 1

1。将HTML存储到localStorage

var dynamicElementHTML = localstorage.dynamicElementHTML || $(".username").html() || "";
localstorage["dynamicElementHTML"] = dynamicElementHTML;

要将其提供给其他网页，可以使用 localstorage

的强大功能

https://developer.mozilla.org/en/docs/Web/API/Window/localStorage

如果你真的对整个元素感兴趣（不仅仅是它的内部HTML）而不是.html()使用.prop("outerHTML")

2。使用jQuery绑定（基本思想）

如果您只想要一种方法将某些变量HTML反映为实际的html并使其保持活动状态，您可以这样做：

var $myElement = $("<div />", {
  class : "userData",
  append : $someDynamicElements,
  appendTo : $someParentElement,
  on : {
    contentUpdate : function() {
       $(this).html( $someDynamicElements );
    }
  }
});

与$someDynamicElements更改时相比，您可以触发contentUpdate

$myElement.trigger("contentUpdate")

3。使用jQuery绑定绑定（概念）

这里有相同的元素绑定概念：

＆＃13;

// Here we will store our elements
var EL = {};
// Create desired HTML elements like this:
var LIST = {
  
  username: $("<b/>", {
    html : "UNKNOWN",
    click : function() {
      alert( $(this).text() );
    }
  }),
  
  email: $("<a/>", {
    html : "test@test.test",
    href : "mailto:"+ "test@test.test"
  }),
  
  // add more here, you got the idea.
  // don't forget that you can assign any JS / jQuery propery to your element.
  // You can go insane using .on() and later .trigger()
  
};

// Our small "program" that replaces data-bind elements
// with dynamic elements from our list

$("[data-bind]").replaceWith(function(i){
  var bind = this.dataset.bind;
  if(!LIST[bind]) return;
  if(!EL.hasOwnProperty(bind)) EL[bind] = [];
  var klon = LIST[bind].clone(true)[0];
  EL[bind].push(klon);
  return klon;
});

// That's it. Now goes your code ///////////////


$(EL.username).css({color:"red"}); // just to test if it works :D


$("[data-target]").on("input", function(){
  var target = this.dataset.target;
  $(EL[target]).html( this.value );
});

// P.S: Even having thousands of elements inside EL
// say you have "EL.tableRows" you can do fabulously
// quick stuff like i.e: sorting, cause you iterate over a plain JS array.
// After the sorting of EL.tableRows is done and you need a jQuery  
// representation simply use $(EL.tableRows).

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Dynamic element Binding in jQuery</h2>
Enter some text and see the update trigger in different places<br>
<input data-target="username"><br>

Welcome <span data-bind="username"></span> !!<br>
You name is <span data-bind="username"></span> Click the red text!<br>
<span data-bind="email"></span>

＆＃13;

Answer 2

如果你想在变量中使用jqueryObject，那么就这样做：

$(function(){
    window.$cooldynamicelement = $("div.username");
})

通过这种方式，您可以在全局环境中使用$cooldynamicelement。如果是你想要的。这样您就可以保存对.username元素的引用，因此每次使用时都会更新。

注意：如果您决定这样做，请小心污染全局背景。：

jquery将动态innerhtml存储为可用的jquery变量

2 个答案:

1。将HTML存储到localStorage

2。使用jQuery绑定（基本思想）

3。使用jQuery绑定绑定（概念）