Question

我已经发现以下代码允许我查找多个变量，并将它们返回到数组中...

function() {
    var cart_item_1 = document.querySelectorAll("#main>#ViewCartWrapper>form>div>.bordered>tbody>tr>td")[5].innerText;
    var cart_item_2 = document.querySelectorAll("#main>#ViewCartWrapper>form>div>.bordered>tbody>tr>td")[9].innerText;
    var cart_item_3 = document.querySelectorAll("#main>#ViewCartWrapper>form>div>.bordered>tbody>tr>td")[13].innerText;
    return [cart_item_1, cart_item_2, cart_item_3];
}

只要有正确的（3）购物车项目，一切正常，但我正在使用的环境各不相同。根据用户输入，可能只有1个购物车项目或7个。

除非在这种情况下确实存在3，否则它将以未定义的方式返回所有内容。

我尝试过使用：

    if ([cart_item_1] == undefined){
    return "_"
    } 
    else {
    return [cart_item_1]
    }
    if ([cart_item_2] == undefined){
    return "_"
    } 
    else {
    return [cart_item_2]
    }

等...

但它会在第一个购物车项目之后停止。

我尝试从另一篇文章“remove-undefined-values-from-array”中实现data.filter，但它返回的内容为undefined。

有人可以帮我找到我需要的东西，只返回存在的变量吗？

或者查看购物车代码，是否有更好的方式动态提取任何实例：

document.querySelectorAll("#main>#ViewCartWrapper>form>div>.bordered>tbody>tr>td")**[5]**.innerText

唯一改变的是加粗的数字。我尝试在该字段中使用通配符，但它返回undefined。

由于我将GTM用作自定义js变量，因此任何推荐都必须是js。

Answer 1

您可以迭代元素，只推送数组中所需元素的'innerText'：

var elements = document.querySelectorAll("#main>#ViewCartWrapper>form>div>.bordered>tbody>tr>td");

var texts = [];
for(var i =0;i<elements.length;i++) {
  if(i==5||i==7||i==10) {
    texts.push(elements[i].innerText);
  }
}

Answer 2

为了获取所有元素并仅在定义innerText时将它们添加到数组中，您可以遍历每个元素并决定基于innerText添加它。

注意：我必须添加一个包裹tbody的表格元素。无论如何，这都是必需的，因为tbody必须是table的孩子。

document.addEventListener("DOMContentLoaded", function () {
  
  var cartItems = addAllCartItems();
  console.log(cartItems);
});

var addAllCartItems = function () {
  var array = [];
  var elements = document.querySelectorAll("#main>#ViewCartWrapper>form>div>.bordered>table>tbody>tr>td");
  
  for (var i = 0; i < elements.length; i++) {
    var element = elements[i];
    if (element.innerText != "") {
      array.push(element.innerText);
    }
  }
  
  return array;
}

<div id="main">
  <div id="ViewCartWrapper">
    <form>
      <div>
        <div class="bordered">
          <table>
            <tbody>
              <tr>
                <td>foo</td>
              </tr>
              <tr>
                <td></td>
              </tr>
              <tr>
                <td>bar</td>
              </tr>
            </tbody>
           </table>
        </div>
      </div>
    </form>
  </div>
</div>

Answer 3

const item = document.querySelectorAll("#main>#ViewCartWrapper>form>div>.bordered>tbody>tr>td");

const filteredCart = Array.from(item).reduce((cart, item, i)=>{
  const innerText = item.innerText;
  if(innerText) cart.push(item.innerText);
  return cart;
}, []);  

console.log(filteredCart);

<section id="main">
  <section id="ViewCartWrapper">
    <form>
      <div>
        <table class="bordered">
          <tr>
            <td>Item 1</td>
            <td>Item 2</td>
          </tr>
        </table>
      </div>
    </form>
  </section>
</section>

您将获得filterCart变量中包含所有已定义值的已过滤购物车。

data.filter上的未定义或带有返回数组

3 个答案: