用jQuery计算Children的总宽度（使用jquery计算li的个数）

25-01-29 23

在这里，我们将给大家分享关于用jQuery计算Children的总宽度的知识，让您更了解使用jquery计算li的个数的本质，同时也会涉及到如何更有效地.children()jQuery选择器返回多个

在这里，我们将给大家分享关于用jQuery计算Children的总宽度的知识，让您更了解使用jquery计算li的个数的本质，同时也会涉及到如何更有效地.children()jQuery选择器返回多个级别的子级、jQuery children() find()和contents()方法、jquery children() 报错、jquery children()和find()区别的内容。

本文目录一览：

用jQuery计算Children的总宽度（使用jquery计算li的个数）
.children()jQuery选择器返回多个级别的子级
jQuery children() find()和contents()方法
jquery children() 报错
jquery children()和find()区别

用jQuery计算Children的总宽度（使用jquery计算li的个数）

我试图找到一个可以理解的答案，但是放弃了。

为了在水平网站上具有动态内容（如博客文章和图像），您必须为像素中的主体设置固定宽度，对吗？
因为您在其中使用浮动元素，否则浮动元素会折断并包装页面，具体取决于浏览器的宽度。

编辑！* 可以使用 jQuery 来计算
该特定值，谢谢：)在此示例中，总大小中添加了一个附加值，该值可用于浮动元素之前的内容。现在，身体将获得动态宽度！ *

我最初的想法是让jQuery为我们计算这个：（“每个帖子的宽度” *“帖子的数量”）+ 250（用于额外的内容）

HTML代码

<body> <!-- Here we want a DYNAMIC value --><div id="container">    <div id="menu"></div> <!-- Example of extra content before the floats -->    <div>Lorem</div>    <div>Lorem</div>    <div>Lorem</div> <!-- Floated elements that we want the sizes of -->    <div>Lorem</div></div>...<!-- So if these posts were 300px exept the last that was 500px wide, then the BODY WIDTH should be ( 300+300+300+500 ) + 250 [#menu] = 1650px -->

Alconja的结果和答案

$(document).ready(function() {var width = 0;$(''.post'').each(function() {    width += $(this).outerWidth( true );});$(''body'').css(''width'', width + 250);});

非常感谢！

答案1

小编典典

看起来您已经很正确了……不过有几点注意事项：

.outerWidth(true)包含padding和margin（因为您正在通过true），因此无需尝试再次添加。
.outerWidth(...) 仅返回第一个元素的宽度，因此，如果每个元素的大小不同，则将其乘以帖子数将不会是总宽度的准确值。

考虑到这一点，这样的事情应该会给你带来什么（保持250初始填充，我认为这是用于菜单和其他东西的？）：

var width = 0;$(''.post'').each(function() {    width += $(this).outerWidth( true );});$(''body'').css(''width'', width + 250);

这是否有帮助，或者您还有其他特定问题（问题还不太清楚）？

.children()jQuery选择器返回多个级别的子级

我有以下 HTML和jQuery代码：

<div id="outer">
 <p>
    <p>paragraph inside division.</p>
    <h2>a heading</h2>
    <ul>
        <li>first item</li>
        <li>second item</li>
    </ul>
 </p>
</div>

jQuery的：

$(function() {
    $divChildren = $('div#outer').children();
    $divChildren.each(function(){
        $(this).css('background-color','red'); 
    });
    alert($divChildren.length); 
});

从我看到的,没有.直接儿童< div id =“outer”>应该是1,但jQuery看到4.为什么？
但是,如果’#outer’内部的每一个都包含在另一个div中(而不是< p>),那么它只能看到一个直接子节点(如预期的那样).

编辑：这绝对是一个格式错误的HTML嵌套问题(并感谢大家的回答).但是,我的问题应该更恰当地说：jQuery是否了解并强制执行HTML嵌套规则,还是浏览器构建DOM树(强加嵌套规则),jQuery只返回DOM树中看到的内容？

解决方法

你的HTML代码无效.你不能把p标签放在p标签里面

段落元素可以包含在元素“address”,“applet”,“blockquote”,“body”,“button”,“center”,“del”,“dd”,“div”,“fieldset”,“形式“,”iframe“,”ins“,”li“,”map“,”noframes“,”noscript“,”object“,”td“和”th“.

HTML内联元素是可以包含在段落元素中的唯一元素.

> a – 用于创建指向其他页面或位置的链接的锚点在HTML中.> abbr – 表示缩写.>首字母缩略词 – 表示首字母缩略词.> area – 在图像中定义地图区域.> b – 粗体导致开始和结束标记之间的文本以粗体显示.> basefont – 允许字体更改.> bdo – 使用ltr(从左到右)或rtl(从右到左)的值覆盖文本方向.> big – 将文本大小设置为大.> br – Break是一个换行符,类似于大多数文档中的回车符和换行符.>引用 – 用于标记文章或其他出版物的标题.>代码 – 表示计算机程序代码.> dfn – 表示定义.> em – 表示强调> font – 允许字体更改.> i – 将标记之间的文本设置为斜体> img – 允许在页面中放置图形图像.>输入 – 表单输入> ins – 表示插入的文本.> kbd – 表示从键盘输入的信息.> param – 用于向对象或applet元素添加其他参数.> q – 用于短报价> s – 通过文字打击> samp – 表示样本.> small – 将文本大小设置为小> span – 用于将特殊样式设置为页面特定区域的容器.> strike – 将文本设置为有一条线穿过它.>强 – 表示强调,基本上是大胆的>分下标> sup – 上标> textarea – 多行文本输入的表单.> tt – 将文本样式设置为等宽电传类型> u – 在开始和结束标记之间设置带下划线的文本.> var – 表示程序中的变量.

jQuery children() find()和contents()方法

在 jQuery 中，如果想要查找当前元素的后代元素（子元素、孙元素等），我们有以下 3 种方法。

children()；
find()；
contents()。

下面我们来一一介绍。

jQuery children()方法

在 jQuery 中，我们可以使用 children() 方法来查找当前元素的“子元素”。注意，children() 方法只能查找子元素，不能查找其他后代元素。

语法：

$().children(selector)

selector 是一个选择器，用来查找符合条件的子元素。selector 是一个可选参数，当参数省略时，表示选择所有子元素；当参数没有省略时，表示选择符合条件的子元素。

举例：

<!DOCTYPE html>
<html>
<head>
    <Meta charset="utf-8" />
    <title></title>
    <style lang="">
        p{margin:6px 0;}
    </style>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            $("#wrapper").hover(function(){
                $(this).children(".select").css("color","red");
            },function(){
                $(this).children(".select").css("color","black");
            })
        })
    </script>
</head>
<body>
    <div id="wrapper">
        <p>子元素</p>
        <p>子元素</p>
        <div>
            <p>孙元素</p>
            <p>孙元素</p>
        </div>
        <p>子元素</p>
        <p>子元素</p>
    </div>
</body>
</html>

默认情况下，预览效果如图 1 所示。

图 1：默认效果

当鼠标指针移到 id="wrapper" 的 div 元素上时，预览效果如图 2 所示。

图 2：鼠标指针移到 id="wrapper" 的 div 元素上时的效果

$(this).children(".select")表示获取当前元素下的的子元素。我们可以发现，的孙元素不会被选中。

jQuery find()方法

在 jQuery 中，我们可以使用 find() 方法来查找当前元素的“后代元素”。注意，find() 方法不仅能查找子元素，还能查找其他后代元素。

语法：

$().find(selector)

selector 是一个可选参数，也是一个选择器，用来查找符合条件的后代元素。当参数省略时，表示选择所有后代元素；当参数没有省略时，表示选择符合条件的后代元素。

举例：

<!DOCTYPE html>
<html>
<head>
    <Meta charset="utf-8" />
    <title></title>
    <style lang="">
        p{margin:6px 0;}
    </style>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            $("#wrapper").hover(function(){
                $(this).find(".select").css("color",function(){
                $(this).find(".select").css("color","black");
            })
        })
    </script>
</head>
<body>
    <div id="wrapper">
        <p>子元素</p>
        <p>子元素</p>
        <div>
            <p>孙元素</p>
            <p>孙元素</p>
        </div>
        <p>子元素</p>
        <p>子元素</p>
    </div>
</body>
</html>

默认情况下，预览效果如图 3 所示。

图 3：默认效果

当鼠标指针移到 id="wrapper" 的 div 元素上时，预览效果如图 4 所示。

图 4：鼠标指针移到 id="wrapper" 的 div 元素上时的效果

$(this).find(".select")表示不仅会选取当前元素下的的子元素，还会选取的孙元素。

jQuery contents()方法

在 jQuery 中，我们可以使用 contents() 方法来获取子元素及其内部文本。contents() 方法和 children() 方法相似，不同的是，contents() 返回的 jQuery 对象中不仅包含子元素，还包含文本内容；而 children() 方法返回的 jQuery 对象中只会包含子元素，不包含文本内容。

在实际开发中，我们极少会用到 contents() 方法，因此小伙伴们不需要深入了解，在这里简单认识一下即可。

jquery children() 报错

工具:idea;

$(".class").children(): 这个报错，说它不是一个函数，我定位到的children 是在 F:\apply\idea\IntelliJ IDEA 2018.1.5\plugins\JavaScriptLanguage\jsLanguageServicesImpl\external\lib.dom.d.ts 文件中：（如何解决）

jquery children()和find()区别

<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{
            /*background-color: pink;*/
        }
    </style>
</head>
<body>
    <div>
        <span>11</span>
        <span>
            <ul>
                <li class="no1">aaa</li>
                <li>bbb</li>
                <li>ccc</li>
            </ul>
        </span>
        <span>222</span>
        <ul>
            <li>ddd</li>
            <li>eee</li>
            <li>fff</li>
        </ul>
    </div>
 
 
</body>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
    $("div").children(".no1").css({color:''#a61c00'',backgroundColor:"#0000ff"});
    console.log($("div").children(".no1")[0]); // 打印获取到的dom元素 这时你会发现结果为 undefined 
 
    // $("div").find(".no1").css({color:''#a61c00'',backgroundColor:"#0000ff"});
</script>
</html>

此时我们再把find 这项打开注释

<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{
            /*background-color: pink;*/
        }
    </style>
</head>
<body>
    <div>
        <span>11</span>
        <span>
            <ul>
                <li class="no1">aaa</li>
                <li>bbb</li>
                <li>ccc</li>
            </ul>
        </span>
        <span>222</span>
        <ul>
            <li>ddd</li>
            <li>eee</li>
            <li>fff</li>
        </ul>
    </div>
 
</body>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
    // $("div").children(".no1").css({color:''#a61c00'',backgroundColor:"#0000ff"});
    // console.log($("div").children(".no1")[0]);
 
 
    $("div").find(".no1").css({color:''#a61c00'',backgroundColor:"#0000ff"});
    console.log($("div").find(".no1")[0]);
</script>
</html>

对应截图：

总结一下区别：

children() 方法返回返回被选元素的所有直接子元素（直接子元素，只找儿子不要孙子（：也就是说不会递归去遍历）

find（）方法获得当前元素集合中每个元素的后代（注意find（）方法，必须传参数，否者无效）

今天关于用jQuery计算Children的总宽度和使用jquery计算li的个数的讲解已经结束，谢谢您的阅读，如果想了解更多关于.children()jQuery选择器返回多个级别的子级、jQuery children() find()和contents()方法、jquery children() 报错、jquery children()和find()区别的相关知识，请在本站搜索。

本文标签：