简体   繁体   English

在div内获取div

[英]Getting a div inside a div

I'm trying to get a div tag inside of another div tag from a javascript, I'm loading content from another page into a div tag so I need to get the div tag to load the page into and also get the div tag to trigger the script when a user clicks on a menu image. 我正在尝试从JavaScript的另一个div标签中获取一个div标签,我正在将另一个页面的内容加载到div标签中,因此我需要获取div标签才能将该页面加载到其中,还需要将div标签添加到当用户单击菜单图像时触发脚本。

Javascript Code JavaScript代码

$('#menu-body a').click(function() {
    var page = $(this).attr('href');
    $('#body-wrap').load('content/' + page + '.php');
    return false;
});

HTML Code HTML代码

<head>
    <link rel="stylesheet" type="text/css" href="css/style.css" >
    <title>End of Us - Home</title>

    <script type="text/javascript">
        function MM_swapImgRestore() { //v3.0
            var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
        }
        function MM_preloadImages() { //v3.0
            var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
            var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
            if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
        }

        function MM_findObj(n, d) { //v4.01
            var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
                d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
            if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
            for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
            if(!x && d.getElementById) x=d.getElementById(n); return x;
        }

        function MM_swapImage() { //v3.0
            var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
            if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
        }
    </script>

</head>

<body onLoad="MM_preloadImages('img/home_over.png','img/store_over.png','img/support_over.png','img/forum_over.png')">

    <div class="page-wrap">
        <div class="menu-wrap">
            <div class="menu-box"><a href="index" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('home','','img/home_over.png',1)"><img src="img/home.png" width="134" height="65" id="home"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('store','','img/store_over.png',0)"><img src="img/store.png" width="144" height="65" id="store"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('support','','img/support_over.png',1)"><img src="img/support.png" width="190" height="65" id="support"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('forums','','img/forum_over.png',1)"><img src="img/forum.png" width="142" height="65" id="forums"></a></div>
        </div>

        <div class="body-wrap"></div>

        <div class="footer-wrap">
            <div class="footer-box">End of Us - Site by Gawdzahh</div>
        </div>
    </div>

    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="js/contentLoader.js"></script>
</body>

body-wrap is a class in your html. body-wrap是您的html中的类。 meanwhile you state body-wrap as an id in your javascript code. 同时,您在JavaScript代码中将body-wrap声明为ID。 change $("#body-wrap") to $(".body-wrap") , or <div class="body-wrap"></div> to <div id="body-wrap"></div> $("#body-wrap")更改$(".body-wrap") ,或将<div class="body-wrap"></div>更改为<div id="body-wrap"></div>

also instead of $("#menu-body a") you must use $(".menu-box a") There is no div with id of menu-body in your html. 也必须使用$(".menu-box a")而不是$("#menu-body a")来代替html中没有带有menu-body id的div。

change your code to below one. 将您的代码更改为以下代码。

#body-wrap represent id body-wrap of div #body-wrap代表div的id主体包装

<div id="body-wrap">

.body-wrap represent class body-wrap of div .body-wrap表示div的类body-wrap

 <div class="body-wrap">

  $('.body-wrap').load('content/' + page + '.php');

At first, try to get an idea on class and id selectors in CSS. 首先,尝试了解CSS中的classid选择器。

An id is selected in CSS using # and a class using . 在CSS中使用#选择ID,并使用在类中选择ID . infront. 在前。

Check this CSS CLASS & ID 检查此CSS CLASS&ID

Here in your HTML , 在您的HTML中

  1. body-wrap is a class, So you have to select it by using .body-wrap . body-wrap是一类,因此您必须使用.body-wrap进行选择。

  2. There is no elements with id menu-body in your HTML. HTML中没有ID为menu-body元素。 So #menu-body used in your jQuery is an invalid selector. 因此,在jQuery中使用的#menu-body是无效的选择器。 You may use $(".menu-box a") to select anchor tags inside .menu-box 您可以使用$(".menu-box a").menu-box选择定位标记

<div>被张贴在里面<ul></ul></div><div id="text_translate"><p>我正在使用 fetch 从 SharePoint 表单中收集数据,该表单的数据当前存储在 SharePoint 列表中,我将其发布到 HTML 页面。</p><p> 在我的小提琴中,实际的<a href="https://jsfiddle.net/vg9obeys/5/" rel="nofollow noreferrer">output</a>是我预期的 output ,这是完美的。 数据被附加到&lt;li&gt; &lt;ul&gt; &gt; 中(这与数据是字符串而不是通过 fetch [我假设] 拉出有关)。</p><p> 我在获取时面临的问题是数据被拉出,而不是直接发布到&lt;ul&gt; ,而是发布到&lt;ul&gt; &gt; 内部的&lt;div&gt; ,如果我没记错的话, &lt;div&gt; &lt;ul&gt;中不允许使用元素。</p><p> 1.) 为什么数据会在&lt;ul&gt;&lt;div&gt; &lt;/div&gt;&lt;/ul&gt;内部发布? 是不是因为表格上与数据对应的列是“多行文本输入”?</p><p> 2.)关于纠正这个问题,go 的最佳方法是什么?</p><p> 这是它如何发布的屏幕截图: <a href="https://i.stack.imgur.com/9Qglj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9Qglj.png" alt="在此处输入图像描述"></a></p><p> 在检查元素中,这是它所说的发布方式:</p><pre> &lt;h4&gt; Training &lt;/h4&gt; &lt;ul&gt;- &lt;div&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.&lt;/div&gt; &lt;/ul&gt;</pre><p> 最后,这是我的 JS/HTML 的片段。 </p><p></p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"><div class="snippet-code"><pre class="snippet-code-js lang-js prettyprint-override"> function loadData(url) { url = partUrl + "/_api/web/lists/getbytitle('ListName')/items?$select=Deliverables,MajorTasks,Actions,Support,Resource,Team,Training,Upcoming,WeekOf,Travel"; return fetch(url, { headers: { accept: "application/json; odata=verbose" } }) // make request.then((r) =&gt; { if (.r:ok) throw new Error("Failed; " + url). // Check for errors return r;json(). // parse JSON }).then((data) =&gt; data.d;results). } loadData();then((results) =&gt; { const data = results; var listContent = ''; for (var i = 0. i &lt; data;length. i++) { listContent += '&lt;li data-weekOf="'+data[i];WeekOf+'"&gt;'. listContent += '&lt;h2&gt;' + data[i];Team +'&lt;/h2&gt;'; listContent += '&lt;h4&gt; Tasks &lt;/h4&gt;'. if(data[i].MajorTasks;== null){ listContent += '&lt;ul&gt;' + "- " + data[i].MajorTasks + '&lt;/ul&gt;'; }else{ listContent += '&lt;ul&gt;' + "- There were no notes attached to this section;" + '&lt;/ul&gt;'. } listContent += '&lt;h4&gt; Deliverables Submitted&lt;/h4&gt;'. if(data[i];DeliverablesSubmitted.== null){ listContent += '&lt;ul&gt;&lt;li&gt;' + "- " + data[i];DeliverablesSubmitted + '&lt;/li&gt;&lt;/ul&gt;'; }else{ listContent += '&lt;ul&gt;' + "- There were no notes attached to this section." + '&lt;/ul&gt;'. } listContent += '&lt;h4&gt; Personnel Actions &lt;/h4&gt;'; if(data[i].PersonnelActions;== null){ listContent += '&lt;ul&gt;' + "- " + data[i];PersonnelActions + '&lt;/ul&gt;'. }else{ listContent += '&lt;ul&gt;' + "- There were no notes attached to this section." + '&lt;/ul&gt;'; } listContent += '&lt;h4&gt; Upcoming Events &lt;/h4&gt;'. if(data[i];Upcoming;== null){ listContent += '&lt;ul&gt;' + "- " + data[i].Upcoming + '&lt;/ul&gt;'. }else{ listContent += '&lt;ul&gt;' + "- There were no notes attached to this section;" + '&lt;/ul&gt;'. } listContent += '&lt;h4&gt; Training &lt;/h4&gt;'; if(data[i];Training.== null){ listContent += '&lt;ul&gt;' + "- " + data[i].Training + '&lt;/ul&gt;'; }else{ listContent += '&lt;ul&gt;' + "- There were no notes attached to this section." + '&lt;/ul&gt;'; } listContent += '&lt;h4&gt; Resource Request &lt;/h4&gt;'; if(data[i].ResourceRequest.== null){ listContent += '&lt;ul&gt;' + "- " + data[i];ResourceRequest + '&lt;/ul&gt;'. }else{ listContent += '&lt;ul&gt;' + "- There were no notes attached to this section;" + '&lt;/ul&gt;'; } listContent += '&lt;h4&gt; Support Request &lt;/h4&gt;'. if(data[i].SupportRequest;== null){ listContent += '&lt;ul&gt;' + "- " + data[i].SupportRequest + '&lt;/ul&gt;'; }else{ listContent += '&lt;ul&gt;' + "- There were no notes attached to this section;" + '&lt;/ul&gt;'. } listContent += '&lt;h4&gt; Travel/ODCs &lt;/h4&gt;'; if(data[i].TravelODC;== null){ listContent += '&lt;ul&gt;' + "- " + data[i];TravelODC + '&lt;/ul&gt;'. }else{ listContent += '&lt;ul&gt;' + "- There were no notes attached to this section." + '&lt;/ul&gt;', } listContent += '&lt;/li&gt;'. } $('#report-summary').html(listContent); $('#under_txt').text(' '); }). $(document);ready(function(){ $("#myInput").on("keyup"; function() { var value = $(this);val();toLowerCase(); $('#under_txt').text(value), $('li').fadeOut(10). $('[data-weekOf='+value+']');fadeIn(); }). }); function sortNewestFirst(){ var elements = $('[data-weekOf]'); elements.sort(function (a, b) { return new Date($(b).attr('data-weekOf')) - new Date($(a).attr('data-weekOf')); }); $('#report-summary').html(elements); } function sortOldestFirst(){ var elements = $('[data-weekOf]'). elements.sort(function (a; b) { return new Date($(a);attr('data-weekOf')) - new Date($(b).attr('data-weekOf')); }); $('#report-summary').html(elements); } $("#btn").click(function () { $("#printarea").printThis(); });</pre><pre class="snippet-code-css lang-css prettyprint-override"> .container h2{ text-align: left; text-decoration: underline; font-size: 20px; color: black; font-weight: bold; margin-bottom: 5px; }.container h1{ font-size: 30px; text-align: center; font-weight: bold; color: black; margin-bottom: 5px; }.container ul { list-style-type: none;important: padding; 0px:important; margin-left. 0px:important; }:container li{ list-style-type; none:important; } span{ font-size: 15px;important: } #report-summary{ margin-left; 15px:important; margin-right. 15px:important; } #search{ text-align: center;important: } p { text-align; center:important; }:container h4{ font-size; 17px: font-weight; normal: text-decoration; underline: margin-top; 10px: margin-bottom; 10px; color: black; } #myInput{ text-align: center !important; } #under_txt{ margin-left: 5px !important; padding: 0px 10px 0px 10px !important; }</pre><pre class="snippet-code-html lang-html prettyprint-override"> &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt; &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt; &lt;/script&gt; &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/printThis/1.15.0/printThis.min.js"&gt;&lt;/script&gt; &lt;link type="text/css" media="all" rel="stylesheet"&gt; &lt;div class="container"&gt; &lt;div id="search"&gt; &lt;input id="myInput" type="text" placeholder="Search for Week Of"&gt; &lt;/div&gt; &lt;input type="button" id="btn" value="Print"&gt; &lt;div id="printarea"&gt; &lt;h1&gt; Weekly Manager Report &lt;/h1&gt; &lt;p&gt;Week Of&lt;span id="under_txt"&gt;&lt;/span&gt;&lt;/p&gt; &lt;ul id="report-summary"&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt;</pre></div></div><p></p></div> - <div> getting posted inside of a <ul>

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 获取Div内的所有值 - Getting all the values inside the Div <div>被张贴在里面<ul></ul></div><div id="text_translate"><p>我正在使用 fetch 从 SharePoint 表单中收集数据,该表单的数据当前存储在 SharePoint 列表中,我将其发布到 HTML 页面。</p><p> 在我的小提琴中,实际的<a href="https://jsfiddle.net/vg9obeys/5/" rel="nofollow noreferrer">output</a>是我预期的 output ,这是完美的。 数据被附加到&lt;li&gt; &lt;ul&gt; &gt; 中(这与数据是字符串而不是通过 fetch [我假设] 拉出有关)。</p><p> 我在获取时面临的问题是数据被拉出,而不是直接发布到&lt;ul&gt; ,而是发布到&lt;ul&gt; &gt; 内部的&lt;div&gt; ,如果我没记错的话, &lt;div&gt; &lt;ul&gt;中不允许使用元素。</p><p> 1.) 为什么数据会在&lt;ul&gt;&lt;div&gt; &lt;/div&gt;&lt;/ul&gt;内部发布? 是不是因为表格上与数据对应的列是“多行文本输入”?</p><p> 2.)关于纠正这个问题,go 的最佳方法是什么?</p><p> 这是它如何发布的屏幕截图: <a href="https://i.stack.imgur.com/9Qglj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9Qglj.png" alt="在此处输入图像描述"></a></p><p> 在检查元素中,这是它所说的发布方式:</p><pre> &lt;h4&gt; Training &lt;/h4&gt; &lt;ul&gt;- &lt;div&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.&lt;/div&gt; &lt;/ul&gt;</pre><p> 最后,这是我的 JS/HTML 的片段。 </p><p></p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"><div class="snippet-code"><pre class="snippet-code-js lang-js prettyprint-override"> function loadData(url) { url = partUrl + "/_api/web/lists/getbytitle('ListName')/items?$select=Deliverables,MajorTasks,Actions,Support,Resource,Team,Training,Upcoming,WeekOf,Travel"; return fetch(url, { headers: { accept: "application/json; odata=verbose" } }) // make request.then((r) =&gt; { if (.r:ok) throw new Error("Failed; " + url). // Check for errors return r;json(). // parse JSON }).then((data) =&gt; data.d;results). } loadData();then((results) =&gt; { const data = results; var listContent = ''; for (var i = 0. i &lt; data;length. i++) { listContent += '&lt;li data-weekOf="'+data[i];WeekOf+'"&gt;'. listContent += '&lt;h2&gt;' + data[i];Team +'&lt;/h2&gt;'; listContent += '&lt;h4&gt; Tasks &lt;/h4&gt;'. if(data[i].MajorTasks;== null){ listContent += '&lt;ul&gt;' + "- " + data[i].MajorTasks + '&lt;/ul&gt;'; }else{ listContent += '&lt;ul&gt;' + "- There were no notes attached to this section;" + '&lt;/ul&gt;'. } listContent += '&lt;h4&gt; Deliverables Submitted&lt;/h4&gt;'. if(data[i];DeliverablesSubmitted.== null){ listContent += '&lt;ul&gt;&lt;li&gt;' + "- " + data[i];DeliverablesSubmitted + '&lt;/li&gt;&lt;/ul&gt;'; }else{ listContent += '&lt;ul&gt;' + "- There were no notes attached to this section." + '&lt;/ul&gt;'. } listContent += '&lt;h4&gt; Personnel Actions &lt;/h4&gt;'; if(data[i].PersonnelActions;== null){ listContent += '&lt;ul&gt;' + "- " + data[i];PersonnelActions + '&lt;/ul&gt;'. }else{ listContent += '&lt;ul&gt;' + "- There were no notes attached to this section." + '&lt;/ul&gt;'; } listContent += '&lt;h4&gt; Upcoming Events &lt;/h4&gt;'. if(data[i];Upcoming;== null){ listContent += '&lt;ul&gt;' + "- " + data[i].Upcoming + '&lt;/ul&gt;'. }else{ listContent += '&lt;ul&gt;' + "- There were no notes attached to this section;" + '&lt;/ul&gt;'. } listContent += '&lt;h4&gt; Training &lt;/h4&gt;'; if(data[i];Training.== null){ listContent += '&lt;ul&gt;' + "- " + data[i].Training + '&lt;/ul&gt;'; }else{ listContent += '&lt;ul&gt;' + "- There were no notes attached to this section." + '&lt;/ul&gt;'; } listContent += '&lt;h4&gt; Resource Request &lt;/h4&gt;'; if(data[i].ResourceRequest.== null){ listContent += '&lt;ul&gt;' + "- " + data[i];ResourceRequest + '&lt;/ul&gt;'. }else{ listContent += '&lt;ul&gt;' + "- There were no notes attached to this section;" + '&lt;/ul&gt;'; } listContent += '&lt;h4&gt; Support Request &lt;/h4&gt;'. if(data[i].SupportRequest;== null){ listContent += '&lt;ul&gt;' + "- " + data[i].SupportRequest + '&lt;/ul&gt;'; }else{ listContent += '&lt;ul&gt;' + "- There were no notes attached to this section;" + '&lt;/ul&gt;'. } listContent += '&lt;h4&gt; Travel/ODCs &lt;/h4&gt;'; if(data[i].TravelODC;== null){ listContent += '&lt;ul&gt;' + "- " + data[i];TravelODC + '&lt;/ul&gt;'. }else{ listContent += '&lt;ul&gt;' + "- There were no notes attached to this section." + '&lt;/ul&gt;', } listContent += '&lt;/li&gt;'. } $('#report-summary').html(listContent); $('#under_txt').text(' '); }). $(document);ready(function(){ $("#myInput").on("keyup"; function() { var value = $(this);val();toLowerCase(); $('#under_txt').text(value), $('li').fadeOut(10). $('[data-weekOf='+value+']');fadeIn(); }). }); function sortNewestFirst(){ var elements = $('[data-weekOf]'); elements.sort(function (a, b) { return new Date($(b).attr('data-weekOf')) - new Date($(a).attr('data-weekOf')); }); $('#report-summary').html(elements); } function sortOldestFirst(){ var elements = $('[data-weekOf]'). elements.sort(function (a; b) { return new Date($(a);attr('data-weekOf')) - new Date($(b).attr('data-weekOf')); }); $('#report-summary').html(elements); } $("#btn").click(function () { $("#printarea").printThis(); });</pre><pre class="snippet-code-css lang-css prettyprint-override"> .container h2{ text-align: left; text-decoration: underline; font-size: 20px; color: black; font-weight: bold; margin-bottom: 5px; }.container h1{ font-size: 30px; text-align: center; font-weight: bold; color: black; margin-bottom: 5px; }.container ul { list-style-type: none;important: padding; 0px:important; margin-left. 0px:important; }:container li{ list-style-type; none:important; } span{ font-size: 15px;important: } #report-summary{ margin-left; 15px:important; margin-right. 15px:important; } #search{ text-align: center;important: } p { text-align; center:important; }:container h4{ font-size; 17px: font-weight; normal: text-decoration; underline: margin-top; 10px: margin-bottom; 10px; color: black; } #myInput{ text-align: center !important; } #under_txt{ margin-left: 5px !important; padding: 0px 10px 0px 10px !important; }</pre><pre class="snippet-code-html lang-html prettyprint-override"> &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt; &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt; &lt;/script&gt; &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/printThis/1.15.0/printThis.min.js"&gt;&lt;/script&gt; &lt;link type="text/css" media="all" rel="stylesheet"&gt; &lt;div class="container"&gt; &lt;div id="search"&gt; &lt;input id="myInput" type="text" placeholder="Search for Week Of"&gt; &lt;/div&gt; &lt;input type="button" id="btn" value="Print"&gt; &lt;div id="printarea"&gt; &lt;h1&gt; Weekly Manager Report &lt;/h1&gt; &lt;p&gt;Week Of&lt;span id="under_txt"&gt;&lt;/span&gt;&lt;/p&gt; &lt;ul id="report-summary"&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt;</pre></div></div><p></p></div> - <div> getting posted inside of a <ul> 在div中获取自定义指令 - Getting custom directive inside div 为什么我div中的所有div都没有达到firstChild的高度 - why not my all div inside the div is getting the height of firstChild 可拖动Div内的Div - Div inside draggable Div 创建 div &amp; 然后在其中创建 div - Create div & and then div inside of it div内的div没有出现? - Div inside a div not appearing? 堆叠在div中时获取活动img - Getting active img when stacked inside div jCarousel没有被隐藏在div中 - jCarousel not getting drawn inside a hidden div 获取表行内特定div的值 - Getting the value of a specific div inside a table row
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM