Даданне змесціва ў адным DIV толькі

Я спрабую дадаць змесціва ў пэўнай DIV толькі без уздзеяння на іншыя дзівы.

How to append content to one div only without showing the content in other divs? This is a live demo of my code: http://jsfiddle.net/aGC5s/

Гэта jQuery код:

$(".wrapper .button").click(function(event) {
   event.preventDefault();
   $('.wrapper').append('   This content will be added  ');
});
1
Чаму AJAX тэг?
дададзена аўтар hjpotter92, крыніца
Жывая дэманстрацыя: jsfiddle.net/aGC5s
дададзена аўтар test, крыніца

14 адказы

Вы можаце выкарыстоўваць $ (гэта) , каб атрымаць зыходны элемент і выкарыстоўваць бліжэйшы() , каб атрымаць з бацькоў з класам абгортка крыніцы падзеі.

<�Моцны> Дэма

$(".wrapper .button").click(function (event) {
    event.preventDefault();
    $(this).closest('.wrapper').append('   This content will be added  ');
});
2
дададзена
але пстрыкнуў абгортка не заўсёды: ек (0)
дададзена аўтар Alex, крыніца

Паспрабуйце гэта:

$(".wrapper .button").click(function (event) {
    event.preventDefault();
    $(this).parent().append('   This content will be added  ');
});

<�моцны> FIDDLE DEMO

Выкарыстанне кода:

$('.wrapper').append('   This content will be added  ');

Даданне новага кантэнту да ўсіх сну з .wrapper класа. Нам трэба, па-першае атрымаць кнопку ў бягучай вобласці пстрыкніце падзея, выкарыстоўваючы гэта . Пасля таго, што мы атрымаем яго бацька, выкарыстоўваючы $ (гэта) .parent() , а затым дадаць новае змесціва толькі да гэтых канкрэтных справах.

<�Моцны> UPDATE

Значна лепш код будзе выкарыстоўваць у бліжэйшы() тут:

$(".wrapper .button").click(function (event) {
    event.preventDefault();
    $(this).closest('.wrapper').append('This content will be added');
});

Цяпер, бліжэйшы ( «абгортка») атрымае першы элемент, які адпавядае .wrapper Селектар шляхам тэставання элемента сябе і праходзячы праз яго продкаў у дрэве DOM і пераканаўшыся, што неаператыўна нашчадкі не вызначаныя.

2
дададзена
я, лепш выкарыстоўваць .parents (). першы() ці бліжэй() менш статычнага HTML кода
дададзена аўтар A. Wolff, крыніца
Гэта прадугледжвае, .wrapper заўсёды бацька, але селектар выкарыстоўваецца дазваляе неаператыўна нашчадкам.
дададзена аўтар Ja͢ck, крыніца
@Gham: Глядзі this- jsfiddle.net/aGC5s/16
дададзена аўтар palaѕн, крыніца
Існуе адна праблема, калі я націснуў на кнопку два разы або больш утрыманне не стамляецца паўтараць прыклад (Гэты кантэнт будзе дададзены кантэнт будзе дададзены гэты кантэнт будзе дададзены). Вы можаце праверыць гэта, націснуўшы на кнопку некалькі разоў. jsfiddle.net/aGC5s/7
дададзена аўтар test, крыніца
Дзякуй палаш Modal.
дададзена аўтар test, крыніца

Паспрабуйце гэта:

$(".wrapper .button").click(function (event) {
    event.preventDefault();
    $(this).parent().append('   This content will be added  ');
});

<�моцны> FIDDLE DEMO

Выкарыстанне кода:

$('.wrapper').append('   This content will be added  ');

Даданне новага кантэнту да ўсіх сну з .wrapper класа. Нам трэба, па-першае атрымаць кнопку ў бягучай вобласці пстрыкніце падзея, выкарыстоўваючы гэта . Пасля таго, што мы атрымаем яго бацька, выкарыстоўваючы $ (гэта) .parent() , а затым дадаць новае змесціва толькі да гэтых канкрэтных справах.

<�Моцны> UPDATE

Значна лепш код будзе выкарыстоўваць у бліжэйшы() тут:

$(".wrapper .button").click(function (event) {
    event.preventDefault();
    $(this).closest('.wrapper').append('This content will be added');
});

Цяпер, бліжэйшы ( «абгортка») атрымае першы элемент, які адпавядае .wrapper Селектар шляхам тэставання элемента сябе і праходзячы праз яго продкаў у дрэве DOM і пераканаўшыся, што неаператыўна нашчадкі не вызначаныя.

2
дададзена
я, лепш выкарыстоўваць .parents (). першы() ці бліжэй() менш статычнага HTML кода
дададзена аўтар A. Wolff, крыніца
Гэта прадугледжвае, .wrapper заўсёды бацька, але селектар выкарыстоўваецца дазваляе неаператыўна нашчадкам.
дададзена аўтар Ja͢ck, крыніца
@Gham: Глядзі this- jsfiddle.net/aGC5s/16
дададзена аўтар palaѕн, крыніца
Існуе адна праблема, калі я націснуў на кнопку два разы або больш утрыманне не стамляецца паўтараць прыклад (Гэты кантэнт будзе дададзены кантэнт будзе дададзены гэты кантэнт будзе дададзены). Вы можаце праверыць гэта, націснуўшы на кнопку некалькі разоў. jsfiddle.net/aGC5s/7
дададзена аўтар test, крыніца
Дзякуй палаш Modal.
дададзена аўтар test, крыніца

http://jsfiddle.net/aGC5s/3/

  $(".wrapper .button").click(function (event) {
      event.preventDefault();

      $(this).closest('.wrapper').append('   This content will be added  ');


  });
1
дададзена

http://jsfiddle.net/aGC5s/3/

  $(".wrapper .button").click(function (event) {
      event.preventDefault();

      $(this).closest('.wrapper').append('   This content will be added  ');


  });
1
дададзена
$(this).closest('.wrapper').append('This content will be added');

Demo --> http://jsfiddle.net/aGC5s/6/

1
дададзена

You can use this and closest

код:

$(this).closest('.wrapper').append(' This content will be added ');

Working fiddle: http://jsfiddle.net/aGC5s/10/

1
дададзена

You can use this and closest

код:

$(this).closest('.wrapper').append(' This content will be added ');

Working fiddle: http://jsfiddle.net/aGC5s/10/

1
дададзена

Вось маё рашэнне:

$(".wrapper").on("click", ".button", function(event) {
  event.preventDefault();
  $(event.delegateTarget).append('   This content will be added  ');
});

Аддаю перавагу дэлегаваць падзея на вашым вузле абгорткі, асабліва вы хочаце, каб змяніць яго!

Акрамя таго, майце на ўвазе, каб адклікаць, каб вызваліць памяць.

АБНАЎЛЕННЕ

З дапамогай прывязкі $ (гэта) ставіцца да дэлегаваных вузел (дзякуючы Джэк ). Гэта рашэнне лепш, таму што няма неабходнасці шукаць у DOM.

$(".wrapper").bind("click", ".button", function(event) {
  event.preventDefault();
  $(this).append('   This content will be added  ');
});
1
дададзена
Doh, ніколі не пярэчу; <�Код> event.delegateTarget паказвае .wrapper , вядома, што правільна :) +1
дададзена аўтар Ja͢ck, крыніца
<�Код> $ (гэта) павінен быць такім жа, як event.delegateTarget .
дададзена аўтар Ja͢ck, крыніца
<�Код> $ (гэта) гэта event.currentTarget пры выкарыстанні .Ён() ( api.jquery.com/on/#event-handler )! Але выкарыстанне прывязкі лепш, таму што ў гэтым выпадку $ (гэта) гэта дэлегаваць вузел.
дададзена аўтар David, крыніца
Дзякуй! Ваш першы каментар меў рацыю пры ўмове прамога з бацькоў .wrapper не было добрай ідэяй. Але я думаю, азіраючыся назад, не так добра.
дададзена аўтар David, крыніца

Вось маё рашэнне:

$(".wrapper").on("click", ".button", function(event) {
  event.preventDefault();
  $(event.delegateTarget).append('   This content will be added  ');
});

Аддаю перавагу дэлегаваць падзея на вашым вузле абгорткі, асабліва вы хочаце, каб змяніць яго!

Акрамя таго, майце на ўвазе, каб адклікаць, каб вызваліць памяць.

АБНАЎЛЕННЕ

З дапамогай прывязкі $ (гэта) ставіцца да дэлегаваных вузел (дзякуючы Джэк ). Гэта рашэнне лепш, таму што няма неабходнасці шукаць у DOM.

$(".wrapper").bind("click", ".button", function(event) {
  event.preventDefault();
  $(this).append('   This content will be added  ');
});
1
дададзена
Doh, ніколі не пярэчу; <�Код> event.delegateTarget паказвае .wrapper , вядома, што правільна :) +1
дададзена аўтар Ja͢ck, крыніца
<�Код> $ (гэта) павінен быць такім жа, як event.delegateTarget .
дададзена аўтар Ja͢ck, крыніца
<�Код> $ (гэта) гэта event.currentTarget пры выкарыстанні .Ён() ( api.jquery.com/on/#event-handler )! Але выкарыстанне прывязкі лепш, таму што ў гэтым выпадку $ (гэта) гэта дэлегаваць вузел.
дададзена аўтар David, крыніца
Дзякуй! Ваш першы каментар меў рацыю пры ўмове прамога з бацькоў .wrapper не было добрай ідэяй. Але я думаю, азіраючыся назад, не так добра.
дададзена аўтар David, крыніца

Use $(this) and .parent() See this fiddle

0
дададзена
Гэта прадугледжвае, .wrapper заўсёды бацька, але селектар дазваляе неаператыўную ніжэйстаячых элементаў, якія адпавядаюць .button .
дададзена аўтар Ja͢ck, крыніца

Use $(this) and .parent() See this fiddle

0
дададзена
Гэта прадугледжвае, .wrapper заўсёды бацька, але селектар дазваляе неаператыўную ніжэйстаячых элементаў, якія адпавядаюць .button .
дададзена аўтар Ja͢ck, крыніца

Я думаю, што вы хочаце гэта

$(this).closest('div.wrapper').append('This content will be added');

<�моцны> DEMO.

Ці, можа быць, гэта адзін

$(this).parent().append('This content will be added');

<�моцны> DEMO.

0
дададзена

Я думаю, што вы хочаце гэта

$(this).closest('div.wrapper').append('This content will be added');

<�моцны> DEMO.

Ці, можа быць, гэта адзін

$(this).parent().append('This content will be added');

<�моцны> DEMO.

0
дададзена