programing

jQuery를 사용하여 단일 자식 요소를 선택하는 방법?

powerit 2023. 9. 20. 20:49
반응형

jQuery를 사용하여 단일 자식 요소를 선택하는 방법?

jQuery를 사용하여 단일 자식 요소를 선택하려면 어떻게 해야 합니까?Traversing API를 살펴봤는데 모든 즉각적인 아이들을 선택할 수 있다는 것을 알고 있습니다.img다음과 같은 요소:

$(this).children('img');

그리고 첫번째 아이를 선택하는 것.img첨자를 사용할 수 있는 요소는 다음과 같습니다.

$(this).children('img')[0];

하지만 제가 이걸 할 수 없다는 게 좀 놀랍군요

$(this).child('img'); // no subscript, returns single element

아니면 제가 놓친 게 있나요?

제 생각에 당신이 하고 싶은 것은 다음과 같습니다.

$(this).children('img').eq(0);

이것은 당신에게 첫번째 img 요소를 포함하는 jquery 객체를 줄 것이고, 반면에

$(this).children('img')[0];

img 요소 자체를 제공할 것입니다.

아니요. 모든 jQuery 함수는 jQuery 객체를 반환하며, 이는 jQuery 객체가 작동하는 방식입니다.이것은 jQuery의 마법의 중요한 부분입니다.

기본 요소에 액세스하려면 세 가지 옵션이 있습니다.

  1. jQuery를 사용하지 않음
  2. 사용하다[0]그것을 참고로

  3. 원하는 작업을 수행할 수 있도록 jQuery 확장...

    $.fn.child = function(s) {
    return $(this).children(s)[0];
}

이런 식으로?

$('img', this)[0]

jQuery와 함께 CSS 셀렉터를 사용하는 것만으로 첫 번째 자식 요소를 대상으로 지정할 수 있습니다.

$(this).children('img:nth-child(1)');

두 번째 자식 요소를 대상으로 하려면 1에서 2로 변경하십시오.

$(this).children('img:nth-child(2)');

등등..

더 많은 요소를 대상으로 하려면 for loop을 사용할 수 있습니다.

for (i = 1; i <= $(this).children().length; i++) {
    let childImg =  $(this).children("img:nth-child("+ i +")");
    // Do stuff...
}

것은 아니다.jQuery, 질문이 요구하는 것처럼, 하지만 본래적으로 (즉, 도서관이 필요하지 않음) 나는 그 직업을 위한 더 나은 도구는querySelector선택 도구의 단일 인스턴스를 얻으려면 다음과 같이 하십시오.

let el = document.querySelector('img');
console.log(el);

일치하는 모든 인스턴스에 대해 다음을 사용합니다.document.querySelectorAll(), 또는 다른 요소 안에 있는 경우 다음과 같이 연결할 수 있습니다.

// Get some wrapper, with class="parentClassName"
let parentEl = document.querySelector('.parentClassName');
// Get all img tags within the parent element by parentEl variable
let childrenEls = parentEl.querySelectorAll('img');

위의 내용은 다음과 같습니다.

let childrenEls = document.querySelector('.parentClassName').querySelectorAll('img');

<html>
<title>

    </title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="assets/css/bootstrap.css">
<body>




<!-- <asp:LinkButton ID="MoreInfoButton" runat="server" Text="<%#MoreInfo%>" > -->
 <!-- </asp:LinkButton> -->
<!-- </asp:LinkButton> -->

<br />
<asp:Repeater ID="Repeater1" runat="server" DataSourceID="SqlDataSource1">
<div>
<a><span id="imgDownArrow_0" class="glyphicon glyphicon-chevron-right " runat="server"> MoreInformation</span></a>
<div id="parent" class="dataContentSectionMessages" style="display:none">
    <!-- repeater1 starts -->
        <!-- <sc:text field="Event Description" runat="server" item="<%#Container.DataItem %>" /> -->
            <ul  >
                <li ><h6><strong>lorem</strong></h6></li>
                <li ><h6><strong>An assigned contact who knows you and your lorem analysis system</strong></h6></li>
                <li ><h6><strong>Internet accessible on-demand information and an easy to use internet shop</strong></h6></li>
                <li ><h6><strong>Extensive and flexible repair capabilities at any location</strong></h6></li>
                <li ><h6><strong>Full Service Contracts</strong></h6></li>
                <li ><h6><strong>Maintenance Contracts</strong></h6></li>
            </ul>
    <!-- repeater1 ends -->
</div>
</div>
<div>
<a><span id="imgDownArrow_0" class="glyphicon glyphicon-chevron-right " runat="server"> MoreInformation</span></a>
<div id="parent" class="dataContentSectionMessages" style="display:none">
    <!-- repeater1 starts -->
        <!-- <sc:text field="Event Description" runat="server" item="<%#Container.DataItem %>" /> -->
            <ul  >
                <li ><h6><strong>lorem</strong></h6></li>
                <li ><h6><strong>An assigned contact who knows you and your lorem analysis system</strong></h6></li>
                <li ><h6><strong>Internet accessible on-demand information and an easy to use internet shop</strong></h6></li>
                <li ><h6><strong>Extensive and flexible repair capabilities at any location</strong></h6></li>
                <li ><h6><strong>Full Service Contracts</strong></h6></li>
                <li ><h6><strong>Maintenance Contracts</strong></h6></li>
            </ul>
    <!-- repeater1 ends -->
</div>
</div>
<div>
<a><span id="imgDownArrow_0" class="glyphicon glyphicon-chevron-right " runat="server"> MoreInformation</span></a>
<div id="parent" class="dataContentSectionMessages" style="display:none">
    <!-- repeater1 starts -->
        <!-- <sc:text field="Event Description" runat="server" item="<%#Container.DataItem %>" /> -->
            <ul  >
                <li ><h6><strong>lorem</strong></h6></li>
                <li ><h6><strong>An assigned contact who knows you and your lorem analysis system</strong></h6></li>
                <li ><h6><strong>Internet accessible on-demand information and an easy to use internet shop</strong></h6></li>
                <li ><h6><strong>Extensive and flexible repair capabilities at any location</strong></h6></li>
                <li ><h6><strong>Full Service Contracts</strong></h6></li>
                <li ><h6><strong>Maintenance Contracts</strong></h6></li>
            </ul>
    <!-- repeater1 ends -->
</div>
</div>
<div>
<a><span id="imgDownArrow_0" class="glyphicon glyphicon-chevron-right " runat="server"> MoreInformation</span></a>
<div id="parent" class="dataContentSectionMessages" style="display:none">
    <!-- repeater1 starts -->
        <!-- <sc:text field="Event Description" runat="server" item="<%#Container.DataItem %>" /> -->
            <ul  >
                <li ><h6><strong>lorem</strong></h6></li>
                <li ><h6><strong>An assigned contact who knows you and your lorem analysis system</strong></h6></li>
                <li ><h6><strong>Internet accessible on-demand information and an easy to use internet shop</strong></h6></li>
                <li ><h6><strong>Extensive and flexible repair capabilities at any location</strong></h6></li>
                <li ><h6><strong>Full Service Contracts</strong></h6></li>
                <li ><h6><strong>Maintenance Contracts</strong></h6></li>
            </ul>
    <!-- repeater1 ends -->
</div>
</div>




</asp:Repeater>


</body>
<!-- Predefined JavaScript -->
<script src="jquery.js"></script>
<script src="bootstrap.js"></script>

<script>

 $(function () {
        $('a').click(function() {
            $(this).parent().children('.dataContentSectionMessages').slideToggle();
        });
    });

    </script>


</html>

언급URL : https://stackoverflow.com/questions/1474089/how-to-select-a-single-child-element-using-jquery

반응형

'programing' 카테고리의 다른 글

도커 파일의 상위 이미지에서 진입점을 제거하는 방법  (0) 2023.09.20
Oracle Sequence nextval이 앞뒤로 점프하는 숫자입니다.  (0) 2023.09.20
mariadb 데이터베이스에서 mysqdump로 마스크된 데이터 내보내기  (0) 2023.09.20
xpath: 값에 문자열이 포함된 지정된 속성을 가진 노드를 찾습니다.  (0) 2023.09.20
std:: vector에서 char* 배열까지  (0) 2023.09.20

'programing'의 다른글

  • 현재글jQuery를 사용하여 단일 자식 요소를 선택하는 방법?

관련글

댓글

티스토리툴바