Question

我有像这样的HTML代码

<div class="products">
    <div class="item type">
        <span class="name"> product 1: </span>
        <span class="value"> clothes</span>
    </div>
    <div class="item type">
        <span class="name"> product 2: </span>
        <span class="value"> glasses </span>
    </div>
    <div class="item type">
        <span class="name"> product 3: </span>
        <span class="value"> bread </span>
    </div>
    <div class="item type">
        <span class="name"> product 4: </span>
        <span class="value"> fruits </span>
    </div>
</div>

每次使用相同名称类名称和值的2跨越时，每个div.item.type中都存在

。我想采用innerText，但有时html代码没有所有产品。

示例：

<div class="products">
    <div class="item type">
        <span class="name"> product 1: </span>
        <span class="value"> clothes</span>
    </div>
    <div class="item type">
        <span class="name"> product 3: </span>
        <span class="value"> bread </span>
    </div>
    <div class="item type">
        <span class="name"> product 4: </span>
        <span class="value"> fruits </span>
    </div>
</div>

为了把它们全部拿走，我会做这样的事情：

product_1_name = document.querySelectorAll('div.products div.item.type span.name'>[0].innerText
product_1_value = document.querySelectorAll('div.products div.item.type span.value'>[0].innerText
product_2_name = document.querySelectorAll('div.products div.item.type span.name'>[1].innerText
product_2_value = document.querySelectorAll('div.products div.item.type span.value'>[1].innerText
product_3_name = document.querySelectorAll('div.products div.item.type span.name'>[2].innerText
product_3_value = document.querySelectorAll('div.products div.item.type span.value'>[2].innerText
product_4_name = document.querySelectorAll('div.products div.item.type span.name'>[3].innerText
product_4_value = document.querySelectorAll('div.products div.item.type span.value'>[3].innerText

但如果我在第二个例子中使用它，它将无法给出正确的结果

是否有任何js查询可以给出这样的结果？

名称类的

结果如下：product1,product3,product4

值类的

结果如下：clothes,bread,fruits

Answer 1

我建议你以类似的方式做到这一点：

let products = {};

document.querySelectorAll('.item').forEach((item) => {
	products[item.querySelector('.name').innerText] = item.querySelector('.value').innerText;
});

console.log(products);

<div class="products">
    <div class="item type">
        <span class="name"> product 1: </span>
        <span class="value"> clothes</span>
    </div>
    <div class="item type">
        <span class="name"> product 3: </span>
        <span class="value"> bread </span>
    </div>
    <div class="item type">
        <span class="name"> product 4: </span>
        <span class="value"> fruits </span>
    </div>
</div>

Answer 2

一种方法是使用：

window.document.getElementsByClassName

实施例

window.document.getElementsByClassName("name");   //returns a collections
window.document.getElementsByClassName("name")[0].innerText; //product 1
window.document.getElementsByClassName("name")[1].innerText; //product 2
window.document.getElementsByClassName("value")[0].innerText; //clothes

或者你可以使用window.document.querySelectorAll

来完成

window.document.querySelectorAll(".name"); //collection of all elts with class name.
window.document.querySelectorAll(".value"); //colllection of all elts with class value.

Answer 3

＆＃13;

function getParsedString(nodeList) {
  var arr = Array.from(nodeList, function(el) {
    return el.textContent.replace(/^\s*|\s*$|[^A-Za-z0-9_-]/g, ""); // Remove space at the beginning and at the end, remove chars that are not A-Z, a-z, 0-9, _ or -
  });
  return arr.join(",");
}

var names = getParsedString(document.querySelectorAll(".products .name"));
var values = getParsedString(document.querySelectorAll(".products .value"));

console.log(names);
console.log(values);

＆＃13;

<div class="products">
  <div class="item type">
    <span class="name"> product 1: </span>
    <span class="value"> clothes</span>
  </div>
  <div class="item type">
    <span class="name"> product 3: </span>
    <span class="value"> bread </span>
  </div>
  <div class="item type">
    <span class="name"> product 4: </span>
    <span class="value"> fruits </span>
  </div>
</div>

＆＃13;

Answer 4

我想说用JavaScript搜索标签内的所有内部文本，使用class =＆＃39; name＆＃39;获取产品名称的列表，然后将此列表内嵌到字符串中。

同样，对于值的名称：使用class =＆＃39; value＆＃39;获取标记内的所有内部文本。获取产品值的列表，然后将此列表内嵌到字符串中。

Answer 5

jsFiddle的工作演示：https://jsfiddle.net/9tw5Lopx/1/

尝试这种方式

var arrName = new Array();
var arrValue = new Array();
//here i am considering "item type" is class 
// if both are class than use one of them only 
var container=document.getElementsByClassName('item type"');
for(var i=0;i< container.lenght;i++)
{
  var spanArray=container[i].getElementsByTagName('span');
  for(var s=0;s<spanArray.length;s++){
  {
    if(element.classList.contains('name'))
      arrName.push(span[s].innerHTML]);
    else 
     arrValue.push(span[s].innerHTML]);
  }
}
var str="";
for(var j=0;j< arrName;j++)
  str += arrName[j] + ":" + arrValue[j] + "<br/>";
document.getElementsById('outputDiv').innerHTML = 
        document.getElementsByClassName('item type"');

Answer 6

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="products">
    <div class="item type">
        <span class="name">product 1: </span>
        <span class="value">clothes </span>
    </div>
    <div class="item type">
        <span class="name">product 3: </span>
        <span class="value">bread </span>
    </div>
    <div class="item type">
        <span class="name">product 4: </span>
        <span class="value">fruits </span>
    </div>
</div>

$cparams = array(
        "ssl"=>array(
            "verify_peer"=>true,
            "verify_peer_name"=>true,
        ),
        'http' => $request['httpOptions']
    );

$context = stream_context_create($cparams);
$fp = fopen($request['url'], 'rb', false, $context);

将列表结果合并到一行

6 个答案: