我是Javascript和Jquery的新手。我想通过Jquery将CSS类添加到以大写字母开头的行中。 HTML代码由Django Admin自动生成。例如这一行：
<tr class="row1"><td class="action-checkbox"><input class="action-select" name="_selected_action" type="checkbox" value="3641" /></td><th class="field-__str__"><a href="/admin/app/bigram/3641/">Ramës Mapo ---> </a></th></tr>
必须有红色背景色。
这是我的源代码，但它不起作用。
<!DOCTYPE html>
<html>
<head>
<style>
important {background-color:red}'
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript">
var t = document.getElementsByClassName("field-__str__").textContent;
//alert(t);
if(t.charAt(0) === t.charAt(0).toUpperCase())
{
$("field-__str__ tr th a").addClass("important");
}
</script>
</head>
<body>
<table id="result_list">
<thead>
<tr>
<th scope="col" class="action-checkbox-column">
<div class="text"><span><input type="checkbox" id="action-toggle" /></span></div>
<div class="clear"></div>
</th>
<th scope="col" class="column-__str__">
<div class="text"><span>Bigram</span></div>
<div class="clear"></div>
</th>
</tr>
</thead>
<tbody>
<tr class="row1"><td class="action-checkbox"><input class="action-select" name="_selected_action" type="checkbox" value="3641" /></td><th class="field-__str__"><a href="/admin/app/bigram/3641/">Ramës Mapo ---> </a></th></tr>
<tr class="row2"><td class="action-checkbox"><input class="action-select" name="_selected_action" type="checkbox" value="3640" /></td><th class="field-__str__"><a href="/admin/app/bigram/3640/">Edi Ramës ---> </a></th></tr>
<tr class="row2"><td class="action-checkbox"><input class="action-select" name="_selected_action" type="checkbox" value="3554" /></td><th class="field-__str__"><a href="/admin/app/bigram/3554/">përmbysi lulishten ---> </a></th></tr>
<tr class="row1"><td class="action-checkbox"><input class="action-select" name="_selected_action" type="checkbox" value="3553" /></td><th class="field-__str__"><a href="/admin/app/bigram/3553/">bredhat përmbysi ---> </a></th></tr>
<tr class="row2"><td class="action-checkbox"><input class="action-select" name="_selected_action" type="checkbox" value="3552" /></td><th class="field-__str__"><a href="/admin/app/bigram/3552/">preu bredhat ---> </a></th></tr>
<tr class="row1"><td class="action-checkbox"><input class="action-select" name="_selected_action" type="checkbox" value="3551" /></td><th class="field-__str__"><a href="/admin/app/bigram/3551/">tregon preu ---> </a></th></tr>
<tr class="row2"><td class="action-checkbox"><input class="action-select" name="_selected_action" type="checkbox" value="3550" /></td><th class="field-__str__"><a href="/admin/app/bigram/3550/">sheshit tregon ---> </a></th></tr>
<tr class="row1"><td class="action-checkbox"><input class="action-select" name="_selected_action" type="checkbox" value="3549" /></td><th class="field-__str__"><a href="/admin/app/bigram/3549/">gjelbërim sheshit ---> </a></th></tr>
<tr class="row2"><td class="action-checkbox"><input class="action-select" name="_selected_action" type="checkbox" value="3548" /></td><th class="field-__str__"><a href="/admin/app/bigram/3548/">Flet gjelbërim ---> </a></th></tr>
<tr class="row1"><td class="action-checkbox"><input class="action-select" name="_selected_action" type="checkbox" value="3547" /></td><th class="field-__str__"><a href="/admin/app/bigram/3547/">bashkie Flet ---> </a></th></tr>
<tr class="row2"><td class="action-checkbox"><input class="action-select" name="_selected_action" type="checkbox" value="3546" /></td><th class="field-__str__"><a href="/admin/app/bigram/3546/">kryetar bashkie ---> </a></th></tr>
<tr class="row1"><td class="action-checkbox"><input class="action-select" name="_selected_action" type="checkbox" value="3545" /></td><th class="field-__str__"><a href="/admin/app/bigram/3545/">Rama kryetar ---> </a></th></tr>
<tr class="row2"><td class="action-checkbox"><input class="action-select" name="_selected_action" type="checkbox" value="3544" /></td><th class="field-__str__"><a href="/admin/app/bigram/3544/">Edi Rama ---> </a></th></tr>
<tr class="row1"><td class="action-checkbox"><input class="action-select" name="_selected_action" type="checkbox" value="3543" /></td><th class="field-__str__"><a href="/admin/app/bigram/3543/">miratoi Edi ---> </a></th></tr>
<tr class="row2"><td class="action-checkbox"><input class="action-select" name="_selected_action" type="checkbox" value="3542" /></td><th class="field-__str__"><a href="/admin/app/bigram/3542/">projektin miratoi ---> </a></th></tr>
</tbody>
</table>
</body>
</html>
谢谢大家！
答案 0 :(得分：0)
您可以使用jquery each函数阅读所有tr's，如果内容以大写字母开头，则在其中找到a标记，然后添加类important。
这样的事情：
$('#result_list > tbody > tr').each(function() {
var t = $(this).text();
if(t.charAt(0) === t.charAt(0).toUpperCase()){
$(this).find('a').addClass("important");
}
});.important{
background-color:red;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="result_list">
<thead>
<tr>
<th scope="col" class="action-checkbox-column">
<div class="text"><span><input type="checkbox" id="action-toggle" /></span></div>
<div class="clear"></div>
</th>
<th scope="col" class="column-__str__">
<div class="text"><span>Bigram</span></div>
<div class="clear"></div>
</th>
</tr>
</thead>
<tbody style="text-align:left;">
<tr class="row1"><td class="action-checkbox"><input class="action-select" name="_selected_action" type="checkbox" value="3641" /></td><th class="field-__str__"><a href="/admin/app/bigram/3641/">Ramës Mapo ---> </a></th></tr>
<tr class="row2"><td class="action-checkbox"><input class="action-select" name="_selected_action" type="checkbox" value="3640" /></td><th class="field-__str__"><a href="/admin/app/bigram/3640/">Edi Ramës ---> </a></th></tr>
<tr class="row2"><td class="action-checkbox"><input class="action-select" name="_selected_action" type="checkbox" value="3554" /></td><th class="field-__str__"><a href="/admin/app/bigram/3554/">përmbysi lulishten ---> </a></th></tr>
<tr class="row1"><td class="action-checkbox"><input class="action-select" name="_selected_action" type="checkbox" value="3553" /></td><th class="field-__str__"><a href="/admin/app/bigram/3553/">bredhat përmbysi ---> </a></th></tr>
<tr class="row2"><td class="action-checkbox"><input class="action-select" name="_selected_action" type="checkbox" value="3552" /></td><th class="field-__str__"><a href="/admin/app/bigram/3552/">preu bredhat ---> </a></th></tr>
<tr class="row1"><td class="action-checkbox"><input class="action-select" name="_selected_action" type="checkbox" value="3551" /></td><th class="field-__str__"><a href="/admin/app/bigram/3551/">tregon preu ---> </a></th></tr>
<tr class="row2"><td class="action-checkbox"><input class="action-select" name="_selected_action" type="checkbox" value="3550" /></td><th class="field-__str__"><a href="/admin/app/bigram/3550/">sheshit tregon ---> </a></th></tr>
<tr class="row1"><td class="action-checkbox"><input class="action-select" name="_selected_action" type="checkbox" value="3549" /></td><th class="field-__str__"><a href="/admin/app/bigram/3549/">gjelbërim sheshit ---> </a></th></tr>
<tr class="row2"><td class="action-checkbox"><input class="action-select" name="_selected_action" type="checkbox" value="3548" /></td><th class="field-__str__"><a href="/admin/app/bigram/3548/">Flet gjelbërim ---> </a></th></tr>
<tr class="row1"><td class="action-checkbox"><input class="action-select" name="_selected_action" type="checkbox" value="3547" /></td><th class="field-__str__"><a href="/admin/app/bigram/3547/">bashkie Flet ---> </a></th></tr>
<tr class="row2"><td class="action-checkbox"><input class="action-select" name="_selected_action" type="checkbox" value="3546" /></td><th class="field-__str__"><a href="/admin/app/bigram/3546/">kryetar bashkie ---> </a></th></tr>
<tr class="row1"><td class="action-checkbox"><input class="action-select" name="_selected_action" type="checkbox" value="3545" /></td><th class="field-__str__"><a href="/admin/app/bigram/3545/">Rama kryetar ---> </a></th></tr>
<tr class="row2"><td class="action-checkbox"><input class="action-select" name="_selected_action" type="checkbox" value="3544" /></td><th class="field-__str__"><a href="/admin/app/bigram/3544/">Edi Rama ---> </a></th></tr>
<tr class="row1"><td class="action-checkbox"><input class="action-select" name="_selected_action" type="checkbox" value="3543" /></td><th class="field-__str__"><a href="/admin/app/bigram/3543/">miratoi Edi ---> </a></th></tr>
<tr class="row2"><td class="action-checkbox"><input class="action-select" name="_selected_action" type="checkbox" value="3542" /></td><th class="field-__str__"><a href="/admin/app/bigram/3542/">projektin miratoi ---> </a></th></tr>
</tbody>
</table>
答案 1 :(得分：0)
您可以使用纯粹的j来实现这一目标。
获取第一个字母的ascii值并检查它是否为大写字母。
var table = document.getElementById('result_list');
var rows = table.rows;
for(i=0; i<rows.length; i++) {
var f_char = rows[i].textContent.charCodeAt(0);
if (f_char >= 65 && f_char <= 90) {
rows[i].classList.add("important");
}
}.important {
background-color:red
}<!DOCTYPE html>
<html>
<head>
<style>
important {background-color:red}'
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript">
var t = document.getElementsByClassName("field-__str__").textContent;
//alert(t);
if(t.charAt(0) === t.charAt(0).toUpperCase())
{
$("field-__str__ tr th a").addClass("important");
}
</script>
</head>
<body>
<table id="result_list">
<thead>
<tr>
<th scope="col" class="action-checkbox-column">
<div class="text"><span><input type="checkbox" id="action-toggle" /></span></div>
<div class="clear"></div>
</th>
<th scope="col" class="column-__str__">
<div class="text"><span>Bigram</span></div>
<div class="clear"></div>
</th>
</tr>
</thead>
<tbody>
<tr class="row1"><td class="action-checkbox"><input class="action-select" name="_selected_action" type="checkbox" value="3641" /></td><th class="field-__str__"><a href="/admin/app/bigram/3641/">Ramës Mapo ---> </a></th></tr>
<tr class="row2"><td class="action-checkbox"><input class="action-select" name="_selected_action" type="checkbox" value="3640" /></td><th class="field-__str__"><a href="/admin/app/bigram/3640/">Edi Ramës ---> </a></th></tr>
<tr class="row2"><td class="action-checkbox"><input class="action-select" name="_selected_action" type="checkbox" value="3554" /></td><th class="field-__str__"><a href="/admin/app/bigram/3554/">përmbysi lulishten ---> </a></th></tr>
<tr class="row1"><td class="action-checkbox"><input class="action-select" name="_selected_action" type="checkbox" value="3553" /></td><th class="field-__str__"><a href="/admin/app/bigram/3553/">bredhat përmbysi ---> </a></th></tr>
<tr class="row2"><td class="action-checkbox"><input class="action-select" name="_selected_action" type="checkbox" value="3552" /></td><th class="field-__str__"><a href="/admin/app/bigram/3552/">preu bredhat ---> </a></th></tr>
<tr class="row1"><td class="action-checkbox"><input class="action-select" name="_selected_action" type="checkbox" value="3551" /></td><th class="field-__str__"><a href="/admin/app/bigram/3551/">tregon preu ---> </a></th></tr>
<tr class="row2"><td class="action-checkbox"><input class="action-select" name="_selected_action" type="checkbox" value="3550" /></td><th class="field-__str__"><a href="/admin/app/bigram/3550/">sheshit tregon ---> </a></th></tr>
<tr class="row1"><td class="action-checkbox"><input class="action-select" name="_selected_action" type="checkbox" value="3549" /></td><th class="field-__str__"><a href="/admin/app/bigram/3549/">gjelbërim sheshit ---> </a></th></tr>
<tr class="row2"><td class="action-checkbox"><input class="action-select" name="_selected_action" type="checkbox" value="3548" /></td><th class="field-__str__"><a href="/admin/app/bigram/3548/">Flet gjelbërim ---> </a></th></tr>
<tr class="row1"><td class="action-checkbox"><input class="action-select" name="_selected_action" type="checkbox" value="3547" /></td><th class="field-__str__"><a href="/admin/app/bigram/3547/">bashkie Flet ---> </a></th></tr>
<tr class="row2"><td class="action-checkbox"><input class="action-select" name="_selected_action" type="checkbox" value="3546" /></td><th class="field-__str__"><a href="/admin/app/bigram/3546/">kryetar bashkie ---> </a></th></tr>
<tr class="row1"><td class="action-checkbox"><input class="action-select" name="_selected_action" type="checkbox" value="3545" /></td><th class="field-__str__"><a href="/admin/app/bigram/3545/">Rama kryetar ---> </a></th></tr>
<tr class="row2"><td class="action-checkbox"><input class="action-select" name="_selected_action" type="checkbox" value="3544" /></td><th class="field-__str__"><a href="/admin/app/bigram/3544/">Edi Rama ---> </a></th></tr>
<tr class="row1"><td class="action-checkbox"><input class="action-select" name="_selected_action" type="checkbox" value="3543" /></td><th class="field-__str__"><a href="/admin/app/bigram/3543/">miratoi Edi ---> </a></th></tr>
<tr class="row2"><td class="action-checkbox"><input class="action-select" name="_selected_action" type="checkbox" value="3542" /></td><th class="field-__str__"><a href="/admin/app/bigram/3542/">projektin miratoi ---> </a></th></tr>
</tbody>
</table>
</body>
</html>
答案 2 :(得分：0)
在选择器ViewGroup[] layouts = new ViewGroup[students.size()];
LayoutInflater i = LayoutInflater.from(getApplicationContext());
for(int i=0;i<students.size(); i++){
// create new layout for student[i]
ViewGroup v = i.inflate(R.layout.your_xml,null); // you can use RelativeLayout instead of ViewGroup since your root view is RelativeLayout
// setup textView
TextView tv = (TextView) v.getChildAt(1) // child view at index 1
tv.setText(...);
// setup imageView
ImageView iv = (ImageView) v.getChildAt(2) // child view at index 2
new ImageLoader.....
// layouts[i] = the new created layout
layouts[i] = v;
}
中缺少.，$("field-__str__ tr th a").addClass("important");也不是tr的子节点。在.field-__str__内包裹javascript，以便在加载.ready()时进行通话。
document
$(function() {
var t = $(".field-__str__");
for (var i = 0; i < t.length; i++) {
var text = t.eq(i).text().trim().charAt(0);
if (text === text.toUpperCase()) {
t.eq(i).find("a").addClass("important");
}
}
})
答案 3 :(得分：0)
Vanilla JS版本：
以下是<script>摘要：
var t = document.querySelectorAll(".field-__str__");
Array.prototype.forEach.call(t, function(el) {
if (el.textContent.charAt(0) === el.textContent.charAt(0).toUpperCase())
el.classList.add("important");
});
这是<style>组件：
.important {
background-color: red
}
有几点需要注意：
您的important课前面没有.，需要指明重要的是一个类而不是一个元素。因此，它已更正为.important。
将您的脚本移至关闭正文标记之前，因为这是防止渲染阻止的标准做法。
vanilla JS，所以如果这是你代码中唯一的jQuery，你可以保存自己和其他几个字节:)。
<!DOCTYPE html>
<html>
<head>
<style>
.important {
background-color: red
}
</style>
</head>
<body>
<table id="result_list">
<thead>
<tr>
<th scope="col" class="action-checkbox-column">
<div class="text"><span><input type="checkbox" id="action-toggle" /></span>
</div>
<div class="clear"></div>
</th>
<th scope="col" class="column-__str__">
<div class="text"><span>Bigram</span>
</div>
<div class="clear"></div>
</th>
</tr>
</thead>
<tbody>
<tr class="row1">
<td class="action-checkbox">
<input class="action-select" name="_selected_action" type="checkbox" value="3641" />
</td>
<th class="field-__str__"><a href="/admin/app/bigram/3641/">Ramës Mapo ---> </a>
</th>
</tr>
<tr class="row2">
<td class="action-checkbox">
<input class="action-select" name="_selected_action" type="checkbox" value="3640" />
</td>
<th class="field-__str__"><a href="/admin/app/bigram/3640/">Edi Ramës ---> </a>
</th>
</tr>
<tr class="row2">
<td class="action-checkbox">
<input class="action-select" name="_selected_action" type="checkbox" value="3554" />
</td>
<th class="field-__str__"><a href="/admin/app/bigram/3554/">përmbysi lulishten ---> </a>
</th>
</tr>
<tr class="row1">
<td class="action-checkbox">
<input class="action-select" name="_selected_action" type="checkbox" value="3553" />
</td>
<th class="field-__str__"><a href="/admin/app/bigram/3553/">bredhat përmbysi ---> </a>
</th>
</tr>
<tr class="row2">
<td class="action-checkbox">
<input class="action-select" name="_selected_action" type="checkbox" value="3552" />
</td>
<th class="field-__str__"><a href="/admin/app/bigram/3552/">preu bredhat ---> </a>
</th>
</tr>
<tr class="row1">
<td class="action-checkbox">
<input class="action-select" name="_selected_action" type="checkbox" value="3551" />
</td>
<th class="field-__str__"><a href="/admin/app/bigram/3551/">tregon preu ---> </a>
</th>
</tr>
<tr class="row2">
<td class="action-checkbox">
<input class="action-select" name="_selected_action" type="checkbox" value="3550" />
</td>
<th class="field-__str__"><a href="/admin/app/bigram/3550/">sheshit tregon ---> </a>
</th>
</tr>
<tr class="row1">
<td class="action-checkbox">
<input class="action-select" name="_selected_action" type="checkbox" value="3549" />
</td>
<th class="field-__str__"><a href="/admin/app/bigram/3549/">gjelbërim sheshit ---> </a>
</th>
</tr>
<tr class="row2">
<td class="action-checkbox">
<input class="action-select" name="_selected_action" type="checkbox" value="3548" />
</td>
<th class="field-__str__"><a href="/admin/app/bigram/3548/">Flet gjelbërim ---> </a>
</th>
</tr>
<tr class="row1">
<td class="action-checkbox">
<input class="action-select" name="_selected_action" type="checkbox" value="3547" />
</td>
<th class="field-__str__"><a href="/admin/app/bigram/3547/">bashkie Flet ---> </a>
</th>
</tr>
<tr class="row2">
<td class="action-checkbox">
<input class="action-select" name="_selected_action" type="checkbox" value="3546" />
</td>
<th class="field-__str__"><a href="/admin/app/bigram/3546/">kryetar bashkie ---> </a>
</th>
</tr>
<tr class="row1">
<td class="action-checkbox">
<input class="action-select" name="_selected_action" type="checkbox" value="3545" />
</td>
<th class="field-__str__"><a href="/admin/app/bigram/3545/">Rama kryetar ---> </a>
</th>
</tr>
<tr class="row2">
<td class="action-checkbox">
<input class="action-select" name="_selected_action" type="checkbox" value="3544" />
</td>
<th class="field-__str__"><a href="/admin/app/bigram/3544/">Edi Rama ---> </a>
</th>
</tr>
<tr class="row1">
<td class="action-checkbox">
<input class="action-select" name="_selected_action" type="checkbox" value="3543" />
</td>
<th class="field-__str__"><a href="/admin/app/bigram/3543/">miratoi Edi ---> </a>
</th>
</tr>
<tr class="row2">
<td class="action-checkbox">
<input class="action-select" name="_selected_action" type="checkbox" value="3542" />
</td>
<th class="field-__str__"><a href="/admin/app/bigram/3542/">projektin miratoi ---> </a>
</th>
</tr>
</tbody>
</table>
<script>
var t = document.querySelectorAll(".field-__str__");
Array.prototype.forEach.call(t, function(el) {
if (el.textContent.charAt(0) === el.textContent.charAt(0).toUpperCase())
el.classList.add("important");
});
</script>
</body>
</html>
答案 4 :(得分：0)
从哪里开始......
你的代码充满了很多错误：
<style>
important {background-color:red}'
^ no dot, so no class-selector ^ ????
/* Should be: */
.important {background-color:red}
</style>
<script type="text/javascript">
/* This script is called immediately, before the DOM is build.
* So there are no elements at this time. */
var t = document.getElementsByClassName("field-__str__").textContent;
/* getElementsByClassName return an array of elements, notice the plural */
//alert(t);
if(t.charAt(0) === t.charAt(0).toUpperCase())
{
/* Will add it to all a-elements, since there is nothing
* specific in this selector */
$("field-__str__ tr th a").addClass("important");
}
</script>
更好：
<script type="text/javascript">
// Everything within $(function() { ... }); will be called
// when the dom is ready
$(function() {
// For each element with class '.field__str__', do
$('.field-__str__').each(function(index, elem) {
var t = elem.textContent;
if(t.charAt(0) === t.charAt(0).toUpperCase())
{
$(elem).find('a').addClass("important");
}
});
});
</script>