.find（）和.closest（）没有得到我的元素

Question

I want to fill a div dynamically suing jQuery. Now the problem is the following:

Using .closest() does not fill my div#articleDetail with divs of classes .date , .views and .count . Since I believe .closest() climbs up the DOM and not down .

Only the name in the h4 tags gets filled into the bottom div ( #articledetail )

HTML:

<div id="make" class="span12">
    <article class="make"> <a href=""><img src="../img/175x175.jpg" alt="" /></a>

        <div class="content">
             <h4><a class="merc" href="#latestClick">Mercedes-Benz</a></h4>

            <div class="date">12 March 2013</div>
            <div class="count"><span></span> photos</div>
            <div class="views">Views: <span>32</span>
            </div>
        </div>
    </article>
    <article class="make latest"> <a href=""><img src="../img/175x175.jpg" alt="" /></a>

        <div class="content">
             <h4><a class="bmw" href="#latestClick">BMW</a></h4>

            <div class="date">12 March 2013</div>
            <div class="count"><span></span> photos</div>
            <div class="views">Views: <span>89</span>
            </div>
        </div>
    </article>
</div>
<div id="articleDetail"></div>

JS:

$('#make article h4 a').click(function (e) {
    e.preventDefault();
    $('#latestInner, #make, #models').hide(200);
    $('#article').show(500);
    //fill articleDetail (name, date, views, count)
    $('#articleDetail').empty();
    $(this).closest('.date').clone().appendTo('#articleDetail'); //date
    $(this).closest('.count').clone().appendTo('#articleDetail'); //count
    $(this).closest('.views').clone().appendTo('#articleDetail'); //views
    $(this).parent().clone().appendTo('#articleDetail'); //name
.....

Any suggestions how I can achieve this?

NOTE: I do NOT want to add ID's and I do not want to change the structure of my HTML. There has to be a way to call and append the appropriate classes to #articledetail .

.views .count and .date

Answer 1

You are right .closest goes up the tree, not down. The elements you want to find are all children of the link's grandparent. So what do you do? You find the grandparent first and then search its children:

var $content = $(this).closest('.content');
$content.find('.date').clone().appendTo('#articleDetail');
// ...

Answer 2

closest finds the closest ascendant that matches the given selector. However in your markup <div class="date"> is not an ancestor of a element, and therefore nothing is found. What should work though is something like:

$(this).closest('.content').find('.date')

Answer 3

只需爬到包装纸，然后在其中找到东西即可：

$(this).closest('.content').find('.date.')