Question

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

投资列表的渲染方法

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

1 个答案:

JS

CSS