클릭 한 요소의 클래스 값을 가져오고이 값을 사용하여 jquery에서이 클래스의 마지막 발생 후 HTML 코드 조각을 넣는 방법

debugcn 에 게시 Dev

제임스 프라이스리스

나는 요소가

<div class="item cars column-2 row-1">
Mercedes
</div>

그리고 나는 이후에 가치를 얻고 싶다 row-. 이 경우 1이됩니다.

지금까지 내 코드 :

$(function() {
    $( ".item" ).click(function() {
      $('.detail-description-catcher').empty();
      $(this).find('.description').clone().appendTo('.detail-description-catcher').show();
    });
});

표시 부분은 빈 div입니다.

<div class="detail-description-catcher"><!-- --></div>

내 목표는 클릭 후 요소에 대한 설명을 표시하는 것입니다. 이것은 괜찮습니다. 그리고 나는 그 방법을 알고 있습니다.

문제가되는 부분은 <div class="detail-description-catcher"></div>코드 부분을 어디에 넣을지 감지하는 방법 입니다.

따라서 예 를row- 들어 row-1 또는 row-2 의 값 을 가져 와서이 클래스의 마지막 발생 을 찾아야합니다 (이것은 PHP에서 정의되며 일반적으로 4 개의 solumns 후에 증가하지만 jquery에서는 동적이어야 함). 이 요소 뒤에 detail-description-catcher div를 넣으십시오.

어떻게하는지 아십니까?

아룬 P 조니

시험

$(function () {
    var $ddc = $('.detail-description-catcher');
    $(".item").click(function () {
        $ddc.empty();
        //here num will be 1
        var num = this.className.match(/row-(\d+)/)[1];
        $(this).find('.description').clone().appendTo($ddc).show();
        $ddc.insertAfter($('.item.row-' + num).last())
    });
});

데모 : Fiddle

또한

$(function () {
    var $ddc = $('.detail-description-catcher');
    $(".item").click(function () {
        $ddc.empty();
        var clazz = this.className.match(/\b(row-\d+)\b/)[1];
        $(this).find('.description').clone().appendTo($ddc).show();
        $ddc.insertAfter($('.item.' + clazz).last())
    });
});

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

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

에서 수정2021-05-29

몇 마디 만하겠습니다

0리뷰

로그인참여 후 검토

Related 관련 기사

기사