Question

我的代码是这样的。它应该显示像日期的水平按钮。当用户点击其中一个按钮时，该框会自动展开，显示其中的图片。

我正在尝试获取用jquery点击的文章的第一个子ID，以便能够显示带有第一个子ID的gallery_items，而最后没有“_title”。但我没有定义。

我的HTML：

<section id="gallery">
    <article class="gallery_date">
        <div id="1389848400_title">16-01-2014</div>
        <div class="gallery_items" id="1389848400">
            <a href="content/uploads/261689_10150238069156283_4353481_n.jpg">261689_10150238069156283_4353481_n.jpg</a><br>
            <a href="content/uploads/IMG_4667.jpg">IMG_4667.jpg</a><br>
            <a href="content/uploads/millenium2.png">millenium2.png</a><br>
        </div>
    </article>
    <article class="gallery_date">
        <div id="1389762000_title">15-01-2014</div>
        <div class="gallery_items" id="1389762000">
            <a href="content/uploads/IMG_4661.jpg">IMG_4661.jpg</a><br>
        </div>
    </article>
    <article class="gallery_date">
        <div id="1389675600_title">14-01-2014</div>
        <div class="gallery_items" id="1389675600">
            <a href="content/uploads/bcn.png">bcn.png</a><br>
            <a href="content/uploads/logoenmedio.png">logoenmedio.png</a><br>       
        </div>
    </article>
</section>

我的Jquery：

$().ready(function() {
    $(".gallery_date").click(function(event) {
        console.log($(".gallery_date:first-child").attr("id"));
    });
});

由于

Answer 1

“我正在尝试获取使用jquery点击的文章的第一个子ID，以便能够显示gallery_items的第一个子ID而不是"_title"。 “

这样做：

$(this).children().first().prop("id").split("_")[0];

或者没有jQuery所以它不是那么冗长：

this.children[0].id.split("_")[0];

但如果这是ID的唯一需要，那么您可以通过其类选择.children()元素：

$(this).children(".gallery_items")

Answer 2

没有“_title”的第一个子ID 。

您可以使用.replace()删除'_title'，也可以使用.split()

$(document).ready(function() {
    $(".gallery_date").click(function(event) {
        var id = $(this).children().first().attr("id")
        console.log(id.replace('_title',''));

        console.log(id.split("_")[0]);
    });
});

Answer 3

试试这个：

$(document).ready(function() {
    $(".gallery_date").click(function(event) {
        console.log($(this).find('.gallery_items:first-child').attr("id"));
    });
});

Answer 4

$(".gallery_date").click(function(event) {
    console.log($(this).children().first().attr("id"));
});

Answer 5

如果您的html按照原样进行结构化，您也可以使用.next（）方法获取gallery_items div，这样您就不必担心获取ID并再次检索DOM元素：

$(document).ready(function() {
    $(".gallery_date").click(function() {
        $(this).next(".gallery_items").slideDown();
    });
});

从一篇只有Jquery类名的文章中获取第一个子ID

5 个答案: