草庐IT

child_jtcy

全部标签

javascript - 使用 jQuery 找到 child 的索引?

如果我有这样的html结构:我有一个通过($('#parent.child')).click()定义的点击处理程序然后我点击类为second的div(first,second,third只是添加了类以使演示更清晰)是否有一种简单的方法来获得数字1,因为它是第二个child?(基于0的索引)?类似于$(this).index 最佳答案 看看jQueryAPI。你建议的方法,index,完全正确:$('#parent.child').click(function(){varindex=$(this).index();});来自文档:If

javascript - 扩展高度以包括绝对定位的 child

我正在为CMS构建一个html/javascript主题设计器。元素是绝对定位的,可以通过鼠标移动/调整大小,和/或包含可编辑的文本,其高度可以由行数决定。但是,我遇到了一个问题,即父元素的高度不会扩展以包含其绝对定位的子元素。最小代码(也在JSFiddlehere上):div.layer{position:absolute}div.layer1{width:400px;border:1pxsolid#ccc}div.layer2{top:15px;left:100px;width:100px;border:1pxsolidblue}containershouldexpandtothe

html - flex 盒子。避免高度比 parent 长的 child (列方向)

这个问题在这里已经有了答案:Whydon'tflexitemsshrinkpastcontentsize?(5个答案)关闭6年前。我正在使用flexbox为网站搭建一个基本的UI。与通常的电子邮件布局非常相似。出于某种原因,列式布局的flexbox容器(.content-main,plumcolor)的高度比它的父级高,我不希望它这样。我做了一个codepensnippet以显示此行为。html,body{width:100%;height:100%;background:lightblue;box-sizing:border-box;}*{box-sizing:border-box;

javascript - 如何防止拖拽 child ,但允许拖拽 parent ?

我有一个用户可以拖动的div,在那个div里面是一个带有一些文本的跨度,我想让用户选择(因此他们不能拖动它)。如何允许拖动div而不允许拖动span?dragstart事件在div上。我可能忽略了一些简单的事情。我在div上尝试了draggable=true,在span上尝试了draggable=false。那没有用。尝试在dragstart上返回false,但也没有用。dragstart(大致):varjTarget=$(e.target);if((jTarget.is('div.header')||(jTarget.parents('div.header'))&&!jTarget.

html - 使 flex child 等于网格列内父级的高度

我正在尝试构建一个定价表,其中每一列都包含一张卡片。我希望所有卡片都拉伸(stretch)到其父(.col)元素的高度。注意:我正在使用Bootstrap4,并尝试使用现有的网格系统(为了保持一致性)和这个特定的标记来实现这一点。我无法让卡片增长到其父容器的高度。这甚至可以用当前的标记实现吗?基本标记是这样的:blahblahblahblahblah这是我的笔:https://codepen.io/anon/pen/oZXWJB 最佳答案 将flex-grow:1;添加到您的.card规则中。HTML标记很好。.row{displa

html - 如何在内联样式中添加 nth-child() 样式?

如何在将内联样式应用于元素(显然包含多个元素)时添加nth-child(n)声明。例如,假设我有一个包含三个p元素的div。一般的样式表规则是这样的:divp:nth-child(2){color:blue;}但是,如何在将内联样式应用于包含的div的同时将第二段颜色设置为蓝色? 最佳答案 内联样式属性仅适用于具有该属性的元素。因此,例如,如果您在div上有样式属性,则样式将仅适用于该div(尽管有继承属性和冲突样式)。您不能在另一个元素上使用内联样式属性来定位不同的元素。即使您将样式属性应用于p元素,您也无法根据伪类有条件地应用内

html - parent 的填充与 child 的边距

当我想将一些(逻辑上有意义的)div放置在一个(逻辑上的)容器div中时,如下所示,这两种方式哪一种在逻辑上更正确?设置容器的padding属性设置里面div的边距属性有时,我在容器中有多个元素,如下所示:对于这种情况,我需要独立于元素周围的空间来设置元素之间的空间。对于两者之间的空间,我不能使用容器的padding属性,我必须使用内部元素的边距(-left或-right)。考虑到这一点,为了设置容器和元素之间的空间,我想知道设置元素的边距(-left,-right,-top,-bottom)或容器的填充是否更有意义.我使用flexbox。我还设置了box-sizing:border-

html - 为什么第 nth-of-type/nth-child 不适用于嵌套元素?

我正在尝试更改div内的奇数div的样式。出于某种原因,当nth-of-type(odd)在另一个div中时,它会影响我的所有div。这是我的常规div和奇数div的代码:.video-entry-summary{width:214px;height:210px;margin-left:10px;float:left;position:relative;overflow:hidden;border:1pxsolidblack;}.video-entry-summary:nth-of-type(odd){width:214px;height:210px;margin-left:0px;f

html - 用 :nth-child? 选择一半的元素

以下面的代码为例:HelloWorldHelloWorldHelloWorldHelloWorld是否有可能使用:nth-child()或其他方式来选择全部元素的一半?代码应选择上述实例中的第一个/最后一个两个li,然后如果我将li的数量增加到六个,它将选择第一个/最后一个三个。我觉得我将不得不使用JavaScript... 最佳答案 您可以在纯CSS中选择一半的元素...直到一定程度。唯一的缺点是您必须知道总元素的最大数量。可能是150,但它不适用于151。这是一个演示:http://jsfiddle.net/tcK3F/(*)最

html -> :first-child work whether the type is known or unknown?

我已阅读IsthereaCSSselectorforthefirstdirectchildonly?和http://www.w3schools.com/cssref/css_selectors.asp我想我必须将效果应用于的第一个child标签,但我无法让它工作。因此,我尝试使用nth-child,但仍然没有运气。JSFiddleTestDetailsLayerThisLayerThatLayersCampaigndetailsTextCSSsection{padding:30px;}sectionarticle{background:#EBEBEB;}sectionarticleh1