如何使用jQuery选择div内的元素

Question

我的Jquery无法使用选择<p>和<img>元素的方式。 我该如何运作？

function projectanim(x)
{
    var Para = x.getElementsByTagName("p"); 
    var Imgs = x.getElementsByTagName("img"); 
    if ($(x).height() != 200)
    {
        $(x).animate({height:'200px'});
        $(Para[0]).animate({display:'inline'});
        $(Imgs[0]).animate({display:'inline'});
    }
    else
    {
        $(x).animate({height:'25px'});
        $(Para[0]).animate({display:'none'});
        $(Imgs[0]).animate({display:'none'});
    }
}

Answer 1

没有HTML，这只是黑暗中的一枪，但是我想您正在尝试在特定的div中获取段落和图像？

尝试这个：

var Para = x.find("p"); 
var Imgs = x.find("img"); 

尽管根据您实际传递的内容，x会确定它是否真正起作用...

Answer 2

function projectanim (projectId) {
  $('p, img', $('div#' + projectId)) // Select p/img tags children of <div id="projectId">
    .slideDown();                 // show using slideDown, fadeIn() or show('slow')
}

// Example
projectanim ('protflolio_project');

jQuery的想法是：

1. 使用正确的选择器
2. 用正确的方法

例子

在id为my_div的div下选择所有img和p标签的不同方法：

// The easy way
p_and_img = $('#my_div p, #my_div img');

// Using the context parameter
p_and_img = $('p, img', $('#my_div'));

// Using the context parameter and making sure my_div is a div
p_and_img = $('p, img', $('div#my_div'));

// only the first p and img
p_and_img = $('p:eq(0), img:eq(0)', $('#my_div'));

Answer 3

您的问题确实非常模糊，但是据我所知，这就是您要实现的目标：

function projectanim(x) {
    var self = $(x);
    if (self.height() === 200) {
        self.animate({ height : '25px' })
            .find('p,img').fadeOut()
            ;
    } else {
        self.animate({ height : '200px' })
            .find('p,img').fadeIn()
            ;
    }
}

话虽这么说，但除非浏览器具有兼容性，否则您确实应该使用CSS而不是Java来做类似的事情。

根据您的父元素（例如<div> ），您可以编写如下的CSS：

div {
    height : 200px;
    transition : height .5s linear;
}
div.active {
    height : 25px;
}
div img,
div p {
    display : inline;
    opacity : 100;
    transition : opacity .5s linear;
}
div.active img,
div.active p {
    opacity : 0;
}

只需使用您的Javascript打开/关闭一个类即可：

function projectanim(x) {
    $(x).toggleClass('active');
}

一切都应该是自动的。 您的Javascript变得更简单，更少耦合，更易于维护，并且您的样式正确了（在CSS文件中）。

Answer 4

“我想做的是淡化

并从零开始进行内联。”

并淡入淡出？ 还是您希望它从display：none变为inline并淡入？

我将向您展示如何完成这两项工作，如果您只想要淡入功能，则可以删除零件。

首先设置p，将img设置为display：none; 和opacity：0，在css中像这样

p, img
{
   display:none;
   opacity:0;
}

其次，您的js必须更改两者的显示

，并且标签会像这样淡入/淡出。

function projectanim(x)
{ 
    if ($(x).height() != 200)
    {
        $(x).animate({height:'200px'});
        document.getElementsByTagName("p").style.display = 'inline';
        document.getElementsByTagName("img").style.display = 'inline';
        $("p").animate({"opacity": "1"}, 1000);
        $("img").animate({"opacity": "1"}, 1000);


    }
    else
    {
        $(x).animate({height:'25px'});
        $("p").animate({"opacity": "0"}, 500);
        $("img").animate({"opacity": "0"}, 500);
        document.getElementsByTagName("p").style.display = 'none';
        document.getElementsByTagName("img").style.display = 'none';
    }
}