Question

我有一个HTML模板字符串prepends div来自Ajax来电的每个用户div的一些用户信息。每个data-stream都有一个false属性，其中包含true或element个值。

如果JS为真，我想使用jQuery或CSS定位addClass，并使用value或var target = $('#result') target.prepend('<div data-stream="' + userObj.stream + '" class="item "> <a target="_blank" href="' + userObj.url + '"> <img class="logo" src="' + userObj.logo + '"/> <span class="name">' + userObj.name + '</span> </a> </div>')。

如果值为true，可能会显示绿色图标，如果为false，则显示红色图标。

JS

  if ( typeof $(".item").attr('data-stream') === "true" ) {
            // style div here..
          }

我的尝试

 $('.item').filter(function(){
               var $this = $(this)
               return $this.data('data-stream') === true
            }).addClass('online')

不起作用，也不起作用：

 $("#results .item").find("[data-stream='true']")

也不：

#include "stdafx.h"
#include <iostream>
#include<vector>
#include <string>
#include <algorithm>
#define n 3

using namespace std;
class student{
public:
    void vrod();
    void dis();
    int stno,score,i;
    string name;
};


int main(){
    int l,*find_score;
   vector<student> my_vector;
    for(int i = 0; i < n; i++)
    {
        student new_student;

        cout << "Number: ";
        cin >> new_student.stno;
        cout << "Score: ";
        cin >> new_student.score;
       cout << "Name: ";
        cin >> new_student.name;

        my_vector.push_back(new_student);
    }

int max_score = std::max_element(
    my_vector.begin(),
    my_vector.end(),
    [] (student const& lhs, student const& rhs){
        return lhs.score < rhs.score;

    }
)->score;
cout<<max_score;
cout<<"l=";
cin>>l;
auto iter = std::find_if(my_vector.begin(), my_vector.end(),
                      [l] (student const& scores){ return scores.score ==l; });


if ( iter != my_vector.end())
      cout<<"it is available"<<(*iter).name<<(*iter).stno;
else
      cout<<"not available";

cin.get();
cin.get();
}

必须有一个非常简单的方法来做这个，使用jQuery或JS的任何建议？

Answer 1

您的$("#results .item").find("[data-stream='true']") 非常接近，但它会查找具有该属性的项目作为.item元素的后代。您想要查找自己具有该属性和值的.item元素：

$("#results .item[data-stream='true']")

请注意.item和[data-stream='true']之间没有空格。它是复合选择器。

或如果您有理由与find分开进行，请使用filter而不是find（但前提是您有理由将这两个方面分开）：

// If you have reason to separate the two aspects
$("#results .item").filter("[data-stream='true']")

复合选择器的实例：

＆＃13;

var target = $('#result')

target.prepend('<div data-stream="true" class="item ">This is the true one</div>');
target.prepend('<div data-stream="false" class="item ">This is the false one</div>');

console.log("Turning the true one blue with a class");
$("#result .item[data-stream='true']").addClass("foo");

＆＃13;

.foo {
  color: blue;
}

＆＃13;

<div id="result"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

＆＃13;

附注：部分问题使用id result，其他部分使用results。你希望那些匹配。

Answer 2

您只能使用CSS，定位数据流属性的值：

更新：使用：之前根据数据属性放置图标

＆＃13;

.item:before {
   font-family: FontAwesome;
   font-weight: normal;
   font-style: normal;
   display: inline-block;
   text-decoration: inherit;
   margin-right:5px;
}
.item[data-stream="true"]:before {
   content: "\f00c";
   color: green;       
 } 
.item[data-stream="false"]:before {
   content: "\f00d";
   color:red;
 }

＆＃13;

<div data-stream="true" class="item ">True</div>
<div data-stream="false" class="item ">False</div>
<div data-stream="true" class="item ">True</div>
<div data-stream="true" class="item ">True</div>
<div data-stream="false" class="item ">False</div>
<div data-stream="false" class="item ">False</div>

＆＃13;

Answer 3

如果您希望Javascript操纵唯一的DOM元素，则应始终在这些元素上使用ID以便于访问。

将您的代码更改为以下内容：

target.prepend('<div id="YOUR_INIQUE_ID" data-stream="' + userObj.stream + '" class="item "> <a target="_blank" href="' + userObj.url + '"> <img class="logo" src="' + userObj.logo + '"/> <span class="name">' + userObj.name + '</span> </a> </div>')

稍后使用这些ID访问该元素：

jQuery('#YOUR_INIQUE_ID').css('display','none');

添加：

再次检查您的问题，我发现您不是在唯一文档元素之后（或者想要操纵非常具体的文档元素），而是在组元素之后。我的第一个答案不适合你的情况。

<强> T.J。 Crowder 提案适合您的情况。

如果属性等于某个值

3 个答案: