부모 ul에 li 추가

Shristi Sharma

jquery를 사용하여 부모의 기존 ul에 추가하기 위해 입력에서 텍스트를 가져 오려고하는데 이렇게 할 때 :

$("input[type = 'text']").keypress(function(event){
    if(event.which === 13){
        //grabbing new todo from input
        var todoText = $(this).val();
        $(this).val("");
        //create a new li and add to ul
        $(this).parent().append("<li><span><i class='fa fa-trash'></i></span> " + todoText + "</li>");
    }
});

부모에게 직접 새로운 li을 추가합니다. 기존 ul에 추가하고 싶다는 언급을 잊었 기 때문에 변경해 보았습니다.

//create a new li and add to ul
$(this).parent("ul").append("<li><span><i class='fa fa-trash'></i></span> " + todoText + "</li>");

하지만 여전히 작동하지 않았고 이제는 아무데도 추가하지 않습니다. 구문이 잘못 되었기 때문일까요?

다음은 내 옥이 어떻게 구성되는지에 대한 예입니다.

.frame
    .bit-2
      h1
        | text 
        i.fa.fa-plus             
      input(type='text', placeholder='text')           
      ul
        li
          span
            i.fa.fa-trash
          |  text              
        li
          span
            i.fa.fa-trash
          |  text             

무슨 일인지 아십니까?

라훌 파텔

아래와 같이 .next () 함수를 사용하세요.

$(document).ready(function(){
  $("input[type = 'text']").keypress(function(event){

    if(event.which === 13){
      //grabbing new todo from input
      var todoText = $(this).val();
      $(this).val("");
      //create a new li and add to ul
      $(this).next("ul").append("<li><span><i class='fa fa-trash'></i></span> " + todoText + "</li>");
    }
  });
});

데모는 아래 스 니펫을 확인하십시오.

$(document).ready(function(){
  $("input[type = 'text']").keypress(function(event){
    
    if(event.which === 13){
      //grabbing new todo from input
      var todoText = $(this).val();
      $(this).val("");
      //create a new li and add to ul
      $(this).next("ul").append("<li><span><i class='fa fa-trash'></i></span> " + todoText + "</li>");
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text"/>
<ul><li>First</li></ul>

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

LI에 UL 추가 (UL에 LI를 추가하지 않음)

분류에서Dev

부모 li 및 sub li에 CSS 클래스 추가

분류에서Dev

jquery로 ul에 자식 li dynamicaly 추가

분류에서Dev

목록 항목 및 앵커 태그 <li> <a> </a> </ li>를 사용하여 UL 내부에 콘텐츠 추가

분류에서Dev

ul bg가 모든 li 뒤에 표시되지 않음

분류에서Dev

li 너비가 부모 ul 태그로 고정되지 않음

분류에서Dev

li 및 ul로 jQuery 추가

분류에서Dev

하위 메뉴가 활성화되면 부모 li에 클래스 추가

분류에서Dev

다른 <li>를 <ul>에 추가하면 페이지 하단의 컨테이너 외부에 나타납니다.

분류에서Dev

e 부트 스트랩 패널 ul li 요소가 모바일 반응 형에서 정렬 할 수 없음

분류에서Dev

마지막 행에없는 부동 <li>를 추가 / 제거 할 때 <ul> 높이 애니메이션

분류에서Dev

자식 <ul> <li> 요소를 가리키면 부모 <ul> <li> 요소의 스타일 변경

분류에서Dev

부모 LI의 수평 중앙에있는 Float subnav UL

분류에서Dev

css-부모 li 아래에 자식 ul 표시

분류에서Dev

jquery 클래스가있는 UL 요소가 아닌 UL에서 모든 LI를 선택합니다.

분류에서Dev

둘 이상의 Ul 항목에 대해 CSS가있는 부동 li 항목

분류에서Dev

둘 이상의 Ul 항목에 대해 CSS가있는 부동 li 항목

분류에서Dev

<ul>-float li-부모 요소 너비

분류에서Dev

콘텐츠 편집 가능한 <ul>에서 모든 <li> 태그 삭제 방지

분류에서Dev

Python 셀레늄은 ul에 li을 추가합니다.

분류에서Dev

동적 ul li에 스크롤 막대 추가

분류에서Dev

몸에 ul li을 추가하는 방법

분류에서Dev

Javascript 배열을 사용하여 ul에 li 추가

분류에서Dev

각 Questio (ul 태그)에 답변 (li 태그) 추가

분류에서Dev

appendChild를 사용하여 li을 ul에 추가

분류에서Dev

Li 그룹에 <ul>을 추가하는 방법

분류에서Dev

jQuery를 사용하여 LI를 UL에 추가 할 수 없음

분류에서Dev

JQuery : <Div> <UL> 안에 새로운 <Li> 추가

분류에서Dev

ul li에 클래스를 추가하는 방법

Related 관련 기사

  1. 1

    LI에 UL 추가 (UL에 LI를 추가하지 않음)

  2. 2

    부모 li 및 sub li에 CSS 클래스 추가

  3. 3

    jquery로 ul에 자식 li dynamicaly 추가

  4. 4

    목록 항목 및 앵커 태그 <li> <a> </a> </ li>를 사용하여 UL 내부에 콘텐츠 추가

  5. 5

    ul bg가 모든 li 뒤에 표시되지 않음

  6. 6

    li 너비가 부모 ul 태그로 고정되지 않음

  7. 7

    li 및 ul로 jQuery 추가

  8. 8

    하위 메뉴가 활성화되면 부모 li에 클래스 추가

  9. 9

    다른 <li>를 <ul>에 추가하면 페이지 하단의 컨테이너 외부에 나타납니다.

  10. 10

    e 부트 스트랩 패널 ul li 요소가 모바일 반응 형에서 정렬 할 수 없음

  11. 11

    마지막 행에없는 부동 <li>를 추가 / 제거 할 때 <ul> 높이 애니메이션

  12. 12

    자식 <ul> <li> 요소를 가리키면 부모 <ul> <li> 요소의 스타일 변경

  13. 13

    부모 LI의 수평 중앙에있는 Float subnav UL

  14. 14

    css-부모 li 아래에 자식 ul 표시

  15. 15

    jquery 클래스가있는 UL 요소가 아닌 UL에서 모든 LI를 선택합니다.

  16. 16

    둘 이상의 Ul 항목에 대해 CSS가있는 부동 li 항목

  17. 17

    둘 이상의 Ul 항목에 대해 CSS가있는 부동 li 항목

  18. 18

    <ul>-float li-부모 요소 너비

  19. 19

    콘텐츠 편집 가능한 <ul>에서 모든 <li> 태그 삭제 방지

  20. 20

    Python 셀레늄은 ul에 li을 추가합니다.

  21. 21

    동적 ul li에 스크롤 막대 추가

  22. 22

    몸에 ul li을 추가하는 방법

  23. 23

    Javascript 배열을 사용하여 ul에 li 추가

  24. 24

    각 Questio (ul 태그)에 답변 (li 태그) 추가

  25. 25

    appendChild를 사용하여 li을 ul에 추가

  26. 26

    Li 그룹에 <ul>을 추가하는 방법

  27. 27

    jQuery를 사용하여 LI를 UL에 추가 할 수 없음

  28. 28

    JQuery : <Div> <UL> 안에 새로운 <Li> 추가

  29. 29

    ul li에 클래스를 추가하는 방법

뜨겁다태그

보관