使用JQuery，我如何使用特定的内部文本值来为div元素定位＆＃34; replaceWith＆＃34;功能

时间：2017-06-30 08:19:42

标签： javascript jquery html

我希望使用此元素<div class="simpleCart_grams">180 grams</div>替换列表中所有项目的<div class="simpleCart_type">Edibles</div>，并使用新的div元素<div class='simpleCart_each'>1 Item</div>。

谢谢！

JSFIDDLE

HTML 

<div class="cartcontent">



        <div class="simpleCart_items"> 
    <div><div>
    <div class="headerRow"></div></div>

    <div class="itemRow row-0 odd" id="cartItem_3">
    <div class="item-remove">
    <a href="javascript:;" class="simpleCart_remove">remove</a>
    </div>
    <div class="item-name">
    <a data-ajax="false" data-role="none" href="/shop_pages/catagories/products/products.php?PID=3&amp;QTY=14">
    <div class="simpleCart_name">Cali Orange</div>
    <div class="simpleCart_type">Sativa</div></a></div>

    <div class="item-weight">
    <div class="simpleCart_grams">14 grams</div>
    </div>
    <div class="item-price">$175.00</div>
    </div>
    <div class="itemRow row-1 even" id="cartItem_6"><div class="item-remove">
    <a href="javascript:;" class="simpleCart_remove">remove</a></div><div class="item-name">
    <a data-ajax="false" data-role="none" href="/shop_pages/catagories/products/products.php?PID=6&amp;QTY=14">
    <div class="simpleCart_name">Amnesia Jack</div>
    <div class="simpleCart_type">Sativa</div></a></div>
    <div class="item-weight"><div class="simpleCart_grams">14 grams</div></div>
    <div class="item-price">$175.00</div></div>






    <div class="itemRow row-2 odd" id="cartItem_105"><div class="item-remove">
    <a href="javascript:;" class="simpleCart_remove">remove</a></div>
    <div class="item-name">

    <a data-ajax="false" data-role="none" href="/shop_pages/catagories/products/products.php?PID=105&amp;QTY=180">
    <div class="simpleCart_name">Blondie Bar</div>
    <div class="simpleCart_type">Edibles</div></a>
    </div><div class="item-weight">
    <div class="simpleCart_grams">180 grams</div></div>
    <div class="item-price">$80.00</div></div></div>
    </div>

SCRIPT 

$( document ).ready(function() {

    where ($( '.simpleCart_type' ).text() === "Edibles") {

  $( "div.simpleCart_grams" ).replaceWith( "<div class='simpleCart_each'>1 Item</div>" );

  }


});

1 个答案:

答案 0 :(得分：3)

使用jQuery :contains()选择器获取包含指定文本的所有元素。

$('div.simpleCart_type:contains("Edibles")')
  .replaceWith( "<div class='simpleCart_each'>1 Item</div>" );

使用filter()方法过滤掉完全匹配的元素。

$('div.simpleCart_type').filter(function(){
   return $(this).text().trim() == 'Edibles';
}).replaceWith( "<div class='simpleCart_each'>1 Item</div>" );

在您的情况下，text()方法返回元素的组合文本内容，因此if条件将失败（JavaScript中没有where个关键字），为了使其工作，您需要检查关于个别因素。

$('div.simpleCart_type' ).each(function(){
   if($(this).text() === "Edibles") {
      $(this).replaceWith( "<div class='simpleCart_each'>1 Item</div>" );
   }
});

更新：由于您要更新克div，请使用filter()方法执行此类操作。

$('div.simpleCart_grams').filter(function() {
  return $(this).closest('.itemRow').find('.simpleCart_type').text().trim() == 'Edibles';
}).replaceWith("<div class='simpleCart_each'>1 Item</div>");

＆＃13;
＆＃13; 
$('div.simpleCart_grams').filter(function() {
  return $(this).closest('.itemRow').find('.simpleCart_type').text().trim() == 'Edibles';
}).replaceWith("<div class='simpleCart_each'>1 Item</div>");
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cartcontent">



  <div class="simpleCart_items">
    <div>
      <div>
        <div class="headerRow"></div>
      </div>

      <div class="itemRow row-0 odd" id="cartItem_3">
        <div class="item-remove">
          <a href="javascript:;" class="simpleCart_remove">remove</a>
        </div>
        <div class="item-name">
          <a data-ajax="false" data-role="none" href="/shop_pages/catagories/products/products.php?PID=3&amp;QTY=14">
            <div class="simpleCart_name">Cali Orange</div>
            <div class="simpleCart_type">Sativa</div>
          </a>
        </div>

        <div class="item-weight">
          <div class="simpleCart_grams">14 grams</div>
        </div>
        <div class="item-price">$175.00</div>
      </div>
      <div class="itemRow row-1 even" id="cartItem_6">
        <div class="item-remove">
          <a href="javascript:;" class="simpleCart_remove">remove</a></div>
        <div class="item-name">
          <a data-ajax="false" data-role="none" href="/shop_pages/catagories/products/products.php?PID=6&amp;QTY=14">
            <div class="simpleCart_name">Amnesia Jack</div>
            <div class="simpleCart_type">Sativa</div>
          </a>
        </div>
        <div class="item-weight">
          <div class="simpleCart_grams">14 grams</div>
        </div>
        <div class="item-price">$175.00</div>
      </div>






      <div class="itemRow row-2 odd" id="cartItem_105">
        <div class="item-remove">
          <a href="javascript:;" class="simpleCart_remove">remove</a></div>
        <div class="item-name">

          <a data-ajax="false" data-role="none" href="/shop_pages/catagories/products/products.php?PID=105&amp;QTY=180">
            <div class="simpleCart_name">Blondie Bar</div>
            <div class="simpleCart_type">Edibles</div>
          </a>
        </div>
        <div class="item-weight">
          <div class="simpleCart_grams">180 grams</div>
        </div>
        <div class="item-price">$80.00</div>
      </div>
    </div>


    <div class="itemRow row-2 odd" id="cartItem_105">
      <div class="item-remove">
        <a href="javascript:;" class="simpleCart_remove">remove</a></div>
      <div class="item-name">

        <a data-ajax="false" data-role="none" href="/shop_pages/catagories/products/products.php?PID=105&amp;QTY=180">
          <div class="simpleCart_name">Black Mintr</div>
          <div class="simpleCart_type">Edibles</div>
        </a>
      </div>
      <div class="item-weight">
        <div class="simpleCart_grams">120 grams</div>
      </div>
      <div class="item-price">$80.00</div>
    </div>
  </div>


</div>
＆＃13;
＆＃13;
＆＃13; 或者使用jQuery :has()和:contains()选择器（不是精确的文本匹配）。

$('.itemRow:has(.simpleCart_type:contains("Edibles")) div.simpleCart_grams').replaceWith("<div class='simpleCart_each'>1 Item</div>");

＆＃13;
＆＃13; 
$('.itemRow:has(.simpleCart_type:contains("Edibles")) div.simpleCart_grams').replaceWith("<div class='simpleCart_each'>1 Item</div>");
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cartcontent">



  <div class="simpleCart_items">
    <div>
      <div>
        <div class="headerRow"></div>
      </div>

      <div class="itemRow row-0 odd" id="cartItem_3">
        <div class="item-remove">
          <a href="javascript:;" class="simpleCart_remove">remove</a>
        </div>
        <div class="item-name">
          <a data-ajax="false" data-role="none" href="/shop_pages/catagories/products/products.php?PID=3&amp;QTY=14">
            <div class="simpleCart_name">Cali Orange</div>
            <div class="simpleCart_type">Sativa</div>
          </a>
        </div>

        <div class="item-weight">
          <div class="simpleCart_grams">14 grams</div>
        </div>
        <div class="item-price">$175.00</div>
      </div>
      <div class="itemRow row-1 even" id="cartItem_6">
        <div class="item-remove">
          <a href="javascript:;" class="simpleCart_remove">remove</a></div>
        <div class="item-name">
          <a data-ajax="false" data-role="none" href="/shop_pages/catagories/products/products.php?PID=6&amp;QTY=14">
            <div class="simpleCart_name">Amnesia Jack</div>
            <div class="simpleCart_type">Sativa</div>
          </a>
        </div>
        <div class="item-weight">
          <div class="simpleCart_grams">14 grams</div>
        </div>
        <div class="item-price">$175.00</div>
      </div>






      <div class="itemRow row-2 odd" id="cartItem_105">
        <div class="item-remove">
          <a href="javascript:;" class="simpleCart_remove">remove</a></div>
        <div class="item-name">

          <a data-ajax="false" data-role="none" href="/shop_pages/catagories/products/products.php?PID=105&amp;QTY=180">
            <div class="simpleCart_name">Blondie Bar</div>
            <div class="simpleCart_type">Edibles</div>
          </a>
        </div>
        <div class="item-weight">
          <div class="simpleCart_grams">180 grams</div>
        </div>
        <div class="item-price">$80.00</div>
      </div>
    </div>


    <div class="itemRow row-2 odd" id="cartItem_105">
      <div class="item-remove">
        <a href="javascript:;" class="simpleCart_remove">remove</a></div>
      <div class="item-name">

        <a data-ajax="false" data-role="none" href="/shop_pages/catagories/products/products.php?PID=105&amp;QTY=180">
          <div class="simpleCart_name">Black Mintr</div>
          <div class="simpleCart_type">Edibles</div>
        </a>
      </div>
      <div class="item-weight">
        <div class="simpleCart_grams">120 grams</div>
      </div>
      <div class="item-price">$80.00</div>
    </div>
  </div>


</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题