添加元素到div與jquery或javascript

Question

問題是：我需要添加文本到div，但我不能。 我們有兩種觀點，ID = 「列表視圖」和ID = 「網格視圖」。我想添加一個通知欄與此js代碼，我可以添加我想要列表視圖，但不能添加到網格視圖。 。

這是 「清單」 的html代碼，

<div id="list-view" style=""> 
    <div class="package-details-list"> 
      <div class="package-details-p1"> 
      <div class="package-details-p2"> 
      <div class="package-details-p3"> 
    <div class="package-details-list"> 
    <div class="package-details-list"> 
    <div class="package-details-list"> 
    <div class="package-details-list"> 
    <div class="package-details-list"> 
    <div class="package-details-list"> 
<div class="package-details-list"> 

這是 「網格」 的html代碼

<div id="list-view" style ="" > 
<div id="grid-view" style="none"> 
    <div class="package-grid-row clearfix"> 
      <div class="package-details-grid"> 
        <a class="package-picture" href="http.abc.com"> 
        <h2> 
        <p> 
      <div class="package-details-grid"> 
      <div class="package-details-grid"> 
      <div class="package-details-grid"> 
      </div> 
    <div class="package-grid-row clearfix"> 
    <div class="package-grid-row clearfix"> 
    <div class="package-grid-row clearfix"> 
</div> 

我試圖添加文本 「＃包詳細信息網」，但我需要隨機地做這件事。

這是我的js代碼，

(function($){  
     var gridp = $("<div></div>");  
     gridp.css({height:'17px',  
     paddingRight: '5px',  
     paddingLeft: '5px',  
     textAlign: 'center',  
     // letterspacing: '2px', 
     lineHeight: '14px',  
     //overflow: 'hidden',  
     fontSize: '12px',  
     fontWeight: 'bold',  
     color: 'white',  
     backgroundColor: '#0E71B8',  
     fontFamily:'GothamNarrowMedium',  
     position: 'relative', 
     width: '100%', 
     // right: '412px' , 
     // margin: '-56px 0px 0px 760px' 

     }) 

     var div = $('<div></div>'); 
     div.css({ 
     height: '30px',  
     paddingRight: '20px',  
     paddingLeft: '20px', 
     textAlign: 'center',  
     // letterspacing: '2px',  
     lineHeight: '28px',  
     overflow: 'hidden',  
     fontSize: '12px',  
     fontWeight: 'bold',  
     color: 'white',  
     backgroundColor: '#0E71B8',  
     fontFamily:'GothamNarrowMedium',  
     position: 'absolute', 
     // width: '100%',  
     right: '412px' ,  
     margin: '-56px 0px 0px 760px',  
     hover :('color : #00A0DE') 

     }) 

     var hcseen = [];  
     var gridseen = []; 
     for (k=0; k<=2; k++) 
     {  
      griddiv = Math.floor((Math.random() * 3) + 1); 
      gridcount = Math.floor((Math.random() * 3) + 1);  
      hcount = Math.floor((Math.random() * 10) + 1);  
      if (!hcseen["s"+hcount] || !griddiv["s"+griddiv]) 
      {   
       hcseen["s"+hcount] = 1;   
       gridseen["s"+griddiv]=1;   
       count = Math.floor((Math.random() * 3) + 1);     
       div.clone().text("xyz "+ count + " add").insertAfter('#list-view .package-details-list:eq('+ hcount +')');     
       gridp.clone().text("abc "+ count + " add").insertAfter('#grid-view .package-grid-row clearfix');   
    }     
       else 
    {  
       k--;  
    } 
    } 
    }) (jQuery); 

它可以在列表視圖中，我試圖盡我所能，但它並不在網格視圖工作。 謝謝。

Answer 1

我不確定我是否確切地知道了你正在努力完成的任務，但是現在已經出現了文本。我還將CSS更改移至類以簡化JS。

https://jsfiddle.net/qm1fwq85/1/

$().ready(function() { 
var gridp = $("#grid-view"); 
$(gridp).addClass("gridStyle"); 

var divs = $("#list-view").find('div'); 
for (var i; i < divs.length; i++) { 
    $(divs[i]).addClass("divStyle"); 
} 

var hcseen = []; 
var gridseen = []; 
for (k = 0; k <= 2; k++) { 
    griddiv = Math.floor((Math.random() * 3) + 1); 
    gridcount = Math.floor((Math.random() * 3) + 1); 
    hcount = Math.floor((Math.random() * 10) + 1); 
    if (!hcseen["s" + hcount] || !griddiv["s" + griddiv]) { 
     hcseen["s" + hcount] = 1; 
     gridseen["s" + griddiv] = 1; 
     count = Math.floor((Math.random() * 3) + 1); 
     $(divs[0]).text("xyz " + count + " add").insertAfter('#list-view .package-details-list:eq(' + hcount + ')'); 
     $(gridp).text("abc " + count + " add").insertAfter('#grid-view .package-grid-row clearfix'); 
    } else { 
     k--; 
    } 
} 
});