jQuery根据内容的高度放置按钮 [英] jQuery place the button according to the height of the content

问题描述

此链接中有有效的演示.标记是这样的，但仅适用于第一行.在演示链接中，我给出了所有代码

I have the working demo is in this link. The markup is something like this but it is only for first row. In the demo link I have given all the codes

<div id="content">
  <ul class="products">
    <li class="product pro first">
      <a href="#">
          <span class="onsale">Sale!</span>
        <img width="100" height="140" title="battlefield" alt="battlefield" class="attachment-shop_catalog wp-post-image" src="http://web-vassets.ea.com/Assets/Resources/Image/FeaturedGame/battlefield-bad-company-2-thumb.png?cb=1340391602">
        <h3>Lorem Ipsum is simply dummy </h3>
          <span class="price"><span class="strike-through"><span class="striked-text"><span class="amount">$&nbsp;67.00</span></span></span> <ins><span class="amount">$&nbsp;23.00</span></ins></span>
      </a>
        <a class="add_to_cart_button button product_type_simple" data-product_id="185" rel="nofollow" href="#">Add to cart</a>
    </li>

    <li class="product pro">
      <a href="#">
          <span class="onsale">Sale!</span>
        <img width="100" height="140" title="battlefield" alt="battlefield" class="attachment-shop_catalog wp-post-image" src="http://web-vassets.ea.com/Assets/Resources/Image/FeaturedGame/battlefield-bad-company-2-thumb.png?cb=1340391602">
        <h3>Battle Field</h3>
          <span class="price"><span class="strike-through"><span class="striked-text"><span class="amount">$&nbsp;67.00</span></span></span> <ins><span class="amount">$&nbsp;23.00</span></ins></span>
      </a>
        <a class="add_to_cart_button button product_type_simple" data-product_id="185" rel="nofollow" href="#">Add to cart</a>
    </li>

    <li class="product pro last">
      <a href="#">
          <span class="onsale">Sale!</span>
        <img width="100" height="140" title="battlefield" alt="battlefield" class="attachment-shop_catalog wp-post-image" src="http://web-vassets.ea.com/Assets/Resources/Image/FeaturedGame/battlefield-bad-company-2-thumb.png?cb=1340391602">
        <h3>Battle Field</h3>
          <span class="price"><span class="strike-through"><span class="striked-text"><span class="amount">$&nbsp;67.00</span></span></span> <ins><span class="amount">$&nbsp;23.00</span></ins></span>
      </a>
        <a class="add_to_cart_button button product_type_simple" data-product_id="185" rel="nofollow" href="#">Add to cart</a>
    </li>
</div>

在这里您可以看到一行包含3列，另一行包含3列.现在，每个内容部分的页面底部都有一个添加到购物车"按钮.现在，我想使所有按钮都位于内容的底部，并且不管文本的长度如何，它都不会介意.为此，我只是在这里使用了一些jQuery的东西.现在，在该演示中，您可以看到它正在占用一个元素的最大高度，并根据它设置css.但是我想把它保留在每一行中.您可以在第一行中看到ess内容，在第二行中看到更多内容.因此，在第二行中可以将按钮放在最下面，这将占用该行的最大高度，但是在第一行中应该有类似的内容.在那里，它应该检查最大高度的内容，并应据此放置按钮.有人可以告诉我每一行该怎么做吗? 很抱歉告诉您，我无法更改我的标记.会保持不变

Here you can see one row has 3 column and another row has 3 columns. Now every content section has a add to cart button at the bottom of the page. Now I wanted to make all the buttons to keep at the bottom of my content and it will not mind whatever the length of text will be. To do that I just used some jQuery stuff here. Now in that demo you can see it is taking the maximum height of one element and setting the css according to it. But I want to keep that in every row. You can see in the first row there is ess content and in the second row there is more content. So in the second row it is okay to put the button at the bottom pare and it is taking the max height for that row.But in first there should be something like that. There it should check the max height content and should place the button according to that. So can someone tell me how to do that for every row? Sorry to tell you that I can't change my markup. It will be remain the same

推荐答案

在jQuery中只需使用

in jQuery just use this

(function($) {
  function normalizeHeight(items) {
    var maxHeight = 0, itemHeight;

    items.each(function() {
      itemHeight = $(this).height();
      if (itemHeight > maxHeight) {
        maxHeight = itemHeight;
      }
    }).height(maxHeight + 'px');
  }

  $(document).load(function(){
    var itemsPerRow = 3,
        items = $('ul.products li'),
        rows = items.length / itemsPerRow, 
        r, min, max;

    if (rows < 1) rows = 1;

    for(r = 0; r < rows; r++) {
      min = itemsPerRow * r,
      max = min + itemsPerRow;
      normalizeHeight(items.slice(min, max));
    }
  });
});</script>

这将使所有li的高度相等，并将检查行中最高的li，并使另一个子代中的i达到该高度.希望它对您有用.

This will make all the li's into equal height and it will check the tallest li in the row and make another i's in that roe to that height. Hope it will work for you.

这篇关于jQuery根据内容的高度放置按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！