Question

我的html文件包含如下代码：

<ol class='items'>

    <li class='item'>
        <div class='content'>
            <p class='title'>
                Item Title
            </p>
            <div class="text">
                Item Description
            </div>
            <div class="itemImg">
                <img src='Image src' />
             </div>
        </div>
    </li>

    <li class='item'>
        <div class='content'>
            <p class='title'>
                Item Title
            </p>
            <div class="text">
                Item Description
            </div>

        </div>
    </li>

    ....

</ol>

JQuery：

var file = 'index.html';
$.get(
    file,
    function (data) {
        const html = $(data),
              item = html.find('li.item'),
              title = item.find('p.title'),     
              text = item.find('div.text'),               
              img = item.find('div.itemImg');

        $('.fetchedItem').html(item[0]);              
        $('.fetchedimg').html(img[0]);

        if(img[0]){
            //Do Something
        }     
    }
);

我希望最后li获得课程item，同样适用于if语句，有时会有div课程itemImg，有时不会，所以我想要检查第div个li是否存在item。

Answer 1

您可以使用'：last'和'：first'来定位带有“item”类的第一个/最后一个div。

请注意，我使用的是lastItem[0] - 这是因为代码$('li.item:last')会返回一个jQuery 对象，并且为了获得实际元素需要使用[0]

$('#myButt').click(function(){
    //Get last div with class "item"
    var lastItem = $('li.item:last');
    alert(lastItem[0].id);
    
    //Does a div exist under 1st .item with class .itemImg
    if ($('li.item:first').find('.itemImg').length) alert('Yes it exists');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ol class='items'>

    <li id="li_1" class='item'>
        <div class='content'>
            <p class='title'>
                Item Title
            </p>
            <div class="text">
                Item Description
            </div>
            <div class="itemImg">
                <img src='Image src' />
             </div>
        </div>
    </li>

    <li id="li_2" class='item'>
        <div class='content'>
            <p class='title'>
                Item Title
            </p>
            <div class="text">
                Item Description
            </div>

        </div>
    </li>

 
    <li id="li_3" class='item'>
        <div class='content'>
            <p class='title'>
                Item Title
            </p>
            <div class="text">
                Item Description
            </div>

        </div>
    </li>
   <button id="myButt">CLick Me</button>

</ol>

如何使用ajax从html文件中找到具有特定类的第一个元素？

1 个答案: