在多个点击的 div 正下方附加一个 div

Question

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

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 是在所有行之后呈现的组件

Answer 1

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

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

在多个点击的 div 正下方附加一个 div

Append a div just below the particular clicked div in a multiple

html

css

frontend

reactjs

JS

CSS