1

我有以下 HTML

<div class='tile'>
    <a href='http://test-site.local' >
        <div class='tileContents'>
            <div class='tileImage'>
                <i class='icon-'></i>
            </div>
            <div class='tileCaption'>
                <h4>Logos</h4>
                <p></p>
            </div>
        </div>
    </a>
</div>

<div class='tile'>
    <a href='http://test-site.local' >
        <div class='tileContents'>
            <div class='tileImage'>
                <i class='icon-'></i>
            </div>
            <div class='tileCaption'>
                <h4>Adverts</h4>
                <p></p>
            </div>
        </div>
    </a>
</div>

我想将href属性更新为我希望使用h4标记值作为定位和区分两个 DIV 的任何 URL，因为它们具有相同的类名。

因此，例如，我想将第一个 div 的 a 标签中的 URL 更新为：

<a  href="http://www.google.com">

so if the value of the h4 tag = "Logos" then update the URL to "http://www.google.com"

第二个 DIV 也是如此：

<a href="http://www.yahoo.com">

so if the value of the h4 tag = "Adverts" then update the URL to "http://www.yahoo.com"

我有以下内容，但我认为我没有正确获取选择器：

<script src="/script/jquery-1.10.2.min.js" type="text/javascript"></script>  
<script type="text/javascript">
$(document).ready(function(){  
    var value = $('div.tile h4').html();
    if (value = "Logos");
    $("DIV.tile a").attr("href", "http://www.google.com");
    if (value = "Adverts");
    $("DIV.tile a").attr("href", "http://www.yahoo.com");
});
</script>

对此的任何帮助将不胜感激..

4

4 回答 4

3

遍历每个图块并更改其children('a')href

$('.tile').each(function(){
   $(this).children('a').attr("href", "http://test-site.local/"+$(this).find('h4').text());
});

和之间的区别在于.find()，.children()它.find()在元素内部找到你想要的东西，而.children()只沿着 DOM 树向下移动一个级别（所以它更快）。

用于.text()获取单词并将其简单地放在 url 后面，而不是使用 if 语句（这样会更快）。

于 2013-10-09T15:16:01.380 回答
2

你可以试试这个

$('div.tile').each(function(){
    var a = $(this).find('a:first');
    a.attr('href', a.attr('href') +'/'+ $(this).find('.tileCaption h4').text());
});

演示

更新：经过长时间的交谈，OP我得到了要求，这就是解决方案：

var urls = {
    'Logos':'http://www.google.com/',
    'Adverts':'http://www.yahoo.com/'
};

$('div.tile').each(function(){
    var a = $(this).find('a:first');
    a.attr('href', urls[$(this).find('.tileCaption h4').text()]);
});

演示。

于 2013-10-09T15:28:15.693 回答
1

首先：类属性的正确选择器语法是.className，而不是#className（#className将搜索id为“className”的节点）。

然后：您应该遍历您的节点，并在每个节点上重复调用一个函数。使用.each()功能：

$('.tile').each(function(){
     //when this function executes, 'this' points to the current node

     // $(this).find(...) will look only through the descendants of 'this'
     var h4 = $(this).find('h4').html();

     $(this).find('a').attr('href', "http://test-site.local/"+h4 );
});
于 2013-10-09T15:14:20.860 回答
0 
$('.tile').each(function () {
    $('> a', this).attr('href', function(){
        return this.href + $(this).find('h4').text();
    });
});
于 2013-10-09T15:16:48.760 回答