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

【问题标题】：How to find the first element with specific class from html file using ajax?如何使用ajax从html文件中找到具有特定类的第一个元素？
【发布时间】：2018-02-22 16:55:22
【问题描述】：

我有一个包含如下代码的 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 中。

【问题讨论】：

li.itemImg:last
How to select last child element in jQuery?的可能重复
if ($('div.itemImg')){ /*exists*/}
嗨 - 只是跟进。你的问题得到了满意的回答吗？如果我们可以提供更多帮助，请在答案下方添加评论，或编辑您的问题以阐明您还需要什么帮助。否则，如果您可以选择“最佳答案”（通过单击答案旁边的复选标记）来结束问题，那就太好了。 如果没有答案提供有用的信息，请添加您自己的答案并将其选为最佳答案。这样做你不会得到任何分数，但这会结束问题。 谢谢！

标签： javascript jquery html json ajax

【解决方案1】：

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

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

$('#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>

【讨论】：