English 中文(简体)
B. 对新创建要素的搁置
原标题:Run jquery on newly created elements
  • 时间:2012-01-12 20:03:59
  •  标签:
  • jquery

我有一份 j,在文件准备就绪时使用。 它最后附上“div.cool”现有各要素的“[hi]”文本。

然后,我有一份装上新内容的雅氏剂。 当用“div.cool”类添加新内容时,用jquery 写法随附。

在创造新内容时,我怎么办?

<>>Example:

http://jsfiddle.net/csDyM/3/

<>光>:

<div class="container">
    <div class="cool">some text.</div>
    <div class="cool">some text.</div>
    <div class="cool">some text.</div>
    <div class="cool">some text.</div>
</div>

<a href="#_" onclick="loadmore();">ajax more</a>

www.un.org/Depts/DGACM/index_spanish.htm Javscript:

$(document).ready(function() {
    $("div.cool").append("[hi]");
});

function loadmore () {

    // this for loop represents the ajax dynamic content. it cannot be changed. 
    for (i=1;i<=4;i++) {
        $("div.container").append( <div class="cool">some text.</div> );
    } 

     // $("div.cool").append("[hi]"); adding this works but it appends existing elements
}

The AJAX (replaced with for loop in exapmle):

$.ajax({
    url: http://url.com/file.php,
    cache: false,
    success: function(html){
        $("div.container").html(html);
    }
});
最佳回答

您可以增加一个触发类别,并对其进行测试:

http://jsfiddle.net/euBYj/

$(document).ready(function() {
    $("div.cool").append("[hi]").addClass("skip");
});


function loadmore () {

    for (i=1;i<=4;i++) {
        $("div.container").append( <div class="cool">some text.</div> );
    } 

    $("div.cool:not(.skip)").append("[hi]").addClass("skip");
}
问题回答

你可以这样做:

$( <div class="cool">some text.</div> )
    .append("[hi]")
    .appendTo("div.container");

效率不高,但不管怎样工作:

function loadmore () {

    // grab existing elements from the DOM
    var $existing = $("div.cool");

    // this for loop represents the ajax dynamic content. it cannot be changed. 
    for (i=1;i<=4;i++) {
        $("div.container").append( <div class="cool">some text.</div> );
    } 

     $("div.cool").not($existing).append("[hi]"); 
}

The most efficient way to append new elements received from an ajax call is to process the new elements right when they are first available in the success handler for the ajax call and only run the script on the new elements, not all the previous elements.


<><>Edit>:

Now, that you ve shown us your ajax code, if what you re trying to do is to append("[hi]") on all new div.cool objects, then you can change your ajax code to this which will just process the new HTML as it arrives from the ajax call before it s inserted into your page. Since it operates only on the newly arrived HTML, it won t modify anything else on the page.

$.ajax({
    url: "http://url.com/file.php",
    cache: false,
    success: function(html){
        var newHTML = $(html);
        newHTML.find("div.cool").append("[hi]");
        $("div.container").empty().append(newHTML);
    }
});

你的雅克斯法典对我来说是很奇怪的,因为它取代了以前的所有要素,我假定,你在像你先前的样本法典一样,增加了新的内容。 你们是否保证贴上正确的《雅氏法典》?

$(document).ready(function() {
   addHi($("div.cool"));
});

function addHi(elem) {
   elem.append("[hi]");
}

function loadmore () {

    // this for loop represents the ajax dynamic content. it cannot be changed. 
    for (i=1;i<=4;i++) {
        var jqobj = $( <div class="cool">some text.</div> );
        addHi(jqobj);

        $("div.container").append(jqobj);
    } 

    // $("div.cool").append("[hi]"); adding this works but it appends existing elements
}
<script>
$(document).ready(function() {
 $("div.cool").append("[hi]");
});

function loadmore () {
 var count = 0;
 $.each("div.container",function(){count++});
 // this for loop represents the ajax dynamic content. it cannot be changed. 
 for (i=1;i<=4;i++) {
     $("div.container").append( <div class="cool">some text.</div> );
 }
 var current = -1;
 $.each("div.container",function(){
  current++;
  if(current < count)continue;
  this.append("[hi]");
 });
 }
</script>

I haven t seen anyone use .filter() yet so I ll throw it out as a possibility. You can select all the elements and filter then down to only the ones you want:

$(".cool").filter(function () {

    //returns true if the end of the text string is not "[hi]" (which keeps it in the set of matched elements)
    return ($(this).text().slice(-4) !=  [hi] )
}).append("[hi]");

最好的解决办法是改变这些要素,然后再将这些要素如詹姆斯·蒙塔涅在OM中加入,但我只是这样说:

  • 现有<代码>div.cool:

    var original_ number = (“div.cool”)length;

  • 采用分析方法创建新的要素。

  • 新增<代码>div.cool:

    var new_ number =美元(“div.cool”);length;

  • a. 采用新 lo:

    for (i=original_number+1;i<=new_number;i++) {
        $("div.cool").eq(i).append( hi );
    }
    




相关问题
getGridParam is not a function

The HTML: <a href="javascript:void(0)" id="m1">Get Selected id s</a> The Function: jQuery("#m1").click( function() { var s; s = jQuery("#list4").getGridParam( selarrrow )...

selected text in iframe

How to get a selected text inside a iframe. I my page i m having a iframe which is editable true. So how can i get the selected text in that iframe.

jQuery cycle page with links

I am using the cycle plugin with pager functionality like this : $j( #homebox ) .cycle({ fx: fade , speed: fast , timeout: 9000, pager: #home-thumbs , ...

jquery ui dialog opens only once

I have a button that opens a dialog when clicked. The dialog displays a div that was hidden After I close the dialog by clicking the X icon, the dialog can t be opened again.

jConfirm with this existing code

I need help to use jConfirm with this existing code (php & Jquery & jAlert). function logout() { if (confirm("Do you really want to logout?")) window.location.href = "logout.php"; } ...

Wrap text after particular symbol with jQuery

What I m trying to do, is wrap text into div inside ll tag. It wouldn t be a problem, but I need to wrap text that appears particularly after "-" (minus) including "minus" itself. This is my html: &...

热门标签