在多个特定单击的 div 下方附加一个 div答案

【问题标题】：Append a div just below the particular clicked div in a multiple在多个特定单击的 div 下方附加一个 div
【发布时间】：2017-10-22 02:38:53
【问题描述】：

我有这份清单。现在，当我单击任何特定元素时，应在该特定行下方呈现一个框
我需要以使其余行向下移动的方式包装元素。
有没有可用的插件？

InvestmentList的渲染方法

render() {
return (
  <div>
    <ul className="panel-list list-inline">
      {this.state.list.length > 0 ?
        this.state.list.map((item,index)=>{
          /*if(!(item.type.toLowerCase()==='stock' && item.is_sold_once==false))*/
            return (
              <li key={index}>
                <div className="layout layout-1 fade-transition clearfix">
                  <div className="layout-header">
                    <div className="layout-img-ls">
                        <img src='https://s3.ap-south-1.amazonaws.com/waccal/static+icons/layout_50.png' />
                    </div>
                    <div className="layout-img-text pull-right">
                      <p >asas</p>
                    </div>
                  </div>
                  <div className="layout-content">
                      <h5>asasas</h5>
                      <a href="#">@adsd</a>
                  </div>
                  <div className="layout-footer">
                    <div className="dropdown">
                        <div className="wbtn-connected fade-transition"></div>
                        <i className="material-icons md-18 pull-right dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">more_vert</i>
                        <ul className="dropdown-menu wcl-sub-dropdown" aria-labelledby="dropdownMenu1">
                          <li><a href="#">Sold</a></li>
                          <li><a href="#">Remove</a></li>
                        </ul>
                    </div>
                  </div>
                </div>
                <div className=''>
                </div>
              </li>
            )
          })
      : <div> No Search Results. <img src="img/noresult.emoji.png" className="emoji-img"/></div>}
    </ul>

  </div>
);

}
这是父 div

        <h5 className="wcl-main-heading">INVESTMENTS</h5>
        <div className="wcl-panel">
          <div className="wcl-panel-head">
            <span className="text-left heading-wcpanel">CURRENT</span>
             <button className="wcl-icon wcl-icon-gray popup-btn pull-right wcl-tooltip" data-toggle="modal" data-target="#add_investor"  data-placement="bottom" title="ADD" onClick={()=>{
                this.setState({
                  showAddInvestor:true
                })
             }}>
                <i className="material-icons md-18" >add_circle_outline</i>
            </button>
          </div>
          <InvestmentList list = {this.props.investors} setInvestor={this.setInvestor} showInvestor={this.showInvestor}/>
          <AddInvestor markSold = {false} showAddInvestor={this.state.showAddInvestor} closeModal={this.closeModal}/>
      </div>

      {this.state.showInvestor?
        <InvestmentInDetail showInvestor={this.showInvestor} investor={this.state.investor}/>
      :null}
    </div>

InvestmentList 是在所有行之后渲染的组件

【问题讨论】：

目前我的新 div 是在所有 rows 之后呈现的。我需要在该特定行之后渲染
您是否错过了添加在点击时添加 div 的逻辑？
@RajshekarReddy 添加了
也许您可以在每行之后添加一个“新的 div 行 x”，并使用 css 属性 display:none。然后让它显示：当单击第 x 行中的项目时阻止
@Nomistake 正如您在代码中看到的那样，使用了重复的
元素，所以我如何知道单击的元素属于哪一行

【解决方案1】：

使用jQuery，解决方案不会太复杂（cmets内联解释）：

JS

/*Populating ul with li*/
    for(var i = 0; i < 30; i++)
    {
        $('ul').append('<li>' + (i+1) + '</li>');
    }
    /*Divide ul inner width by li outerwidth+margins to get number of li that fit on a single line*/
    var numLiInRows = $('ul').width() / $('ul').find('li').outerWidth(true);

    /*on needs to be used as the li are not present when the DOM was loaded*/
    $('ul').on('click','li', function(){
        $('ul').find('.info').remove();//remove previous info boxes
        var newElementToInsert = '<div class="info">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.</div>';//what the info box will be
      var liIndex = $('ul').find('li').index($(this));//find the position the clicked on li has in the array of li elements
      var numLi = $('ul').find('li').length;//find total li elements
      var row = Math.ceil((liIndex+1)/numLiInRows);//get row by using the index divided by how many li are in a row, rounded up
      console.log(row);

      /*if row times number of li in a row is bigger than the total li, just add the box after the last row*/
      if(row*numLiInRows >= numLi){
        $('ul').find('li').eq(numLi-1).after(newElementToInsert);
      }
      /*Add the box after the . end of the current row*/
      else{             
        $('ul').find('li').eq(row*numLiInRows-1).after(newElementToInsert);
       }
    });

CSS

ul{
  width: 480px;
  list-style: none;
}
li{
  float: left;
  width: 40px;
  height: 70px;
  border: 1px solid black;
  box-sizing: border-box;
  margin: 10px;
  cursor: pointer;
  font-size: 36px;
  line-height: 70px;
  text-align: center;
}
.info{
  float: left;
  clear: both;
  width: 100%;
  margin: 10px 0;
  border: 1px solid red;
  box-sizing: border-box;
  height: 100px;
  padding: 5px;
}

JsFiddle

【讨论】：